changed the layout and the navbar.

frontend/src/app/components/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = () => (
     <style jsx>{`
       footer {
         text-align: center;
-        background-color: ${theme.colors.darkgrey};
+        background-color: ${theme.colors.lightgrey};
         color: ${theme.colors.offWhite};
       }
     `}</style>

frontend/src/app/components/Header.tsx

@@ -1,13 +1,36 @@
 import Logo from './Logo'
 import Link from 'next/link'
+import Nav from './Nav'
+import theme from '../../styles/theme'
 
 const Header = () => (
   <header>
     <Logo />
+    <Nav />
 
     <style jsx>{`
       header {
-        padding: 20px;
+        position: relative;
+        text-align: center;
+        background-color: #efefef;
+        width: 100%;
+        z-index: 999;
+        box-shadow: ${theme.bs};
+      }
+
+      @media screen and (min-width: 768px) {
+        header {
+          display: grid;
+          grid-template-columns: 1fr auto minmax(670px, 1fr) 1fr;
+        }
+
+        :global(.logo) {
+          grid-column: 2;
+        }
+
+        :global(nav) {
+          grid-column: 3;
+        }
       }
     `}</style>
   </header>

frontend/src/app/components/Logo.tsx

@@ -1,38 +1,57 @@
 import Link from 'next/link'
 
 const Logo = () => (
-  <Link href='/'>
-    <a>
-      <div id='logo'>
-        <span id='circle'>˙u</span>
-        <span id='text'>fit</span>
-      </div>
-      <style jsx>
-        {`
-          #logo {
-            position: relative;
-            height: 60px;
-            width: 60px;
-            color: white;
-            background-color: red;
-            border-radius: 30px;
-            font-size: 40px;
-            font-weight: 900;
-            padding: 10px 0 0 15px;
-          }
+  <h1 className='logo'>
+    <Link href='/'>
+      <a>
+        <span className='logo-circle'>u</span>
+        <span className='logo-text'>fit</span>
+      </a>
+    </Link>
+    <style jsx>
+      {`
+        .logo {
+          margin: 10px auto;
+        }
+        .logo span {
+          padding-top: 0.3em;
+          font-size: 40px;
+        }
+        .logo-circle {
+          position: relative;
+          display: inline-block;
+          text-align: right;
+          width: 1.55em;
+          height: 1.55em;
+          background-color: red;
+          border-radius: 50%;
+          font-weight: 900;
+          padding-right: 0.2em;
+        }
+        .logo-circle::before {
+          position: absolute;
+          content: '';
+          display: block;
+          width: 0.2em;
+          height: 0.2em;
+          border-radius: 50%;
+          background-color: white;
+          right: 55%;
+          bottom: 55%;
+        }
 
-          a {
-            text-decoration: none;
-          }
+        a {
+          text-decoration: none;
+          color: white;
+        }
 
-          #text {
-            color: black;
-            margin-left: 3px;
-          }
-        `}
-      </style>
-    </a>
-  </Link>
+        .logo .logo-text {
+          color: black;
+          margin-left: 0em;
+        }
+      `}
+    </style>
+  </h1>
 )
 
 export default Logo

frontend/src/app/components/Nav.tsx

@@ -1,68 +1,188 @@
 import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCalendarAlt, faStopwatch20 } from '@fortawesome/free-solid-svg-icons'
 
-import { UserNav } from '../../../src/user/user'
 import theme from '../../styles/theme'
+import UserNav from '../../user/components/UserNav'
 
-const Nav = () => (
-  <nav>
-    <ul>
-      <li>
-        <Link href='/'>
-          <a>Home</a>
-        </Link>
-      </li>
-      <li>
-        <Link href='/training'>
-          <a>Training</a>
-        </Link>
-      </li>
-      <li>
-        <Link href='/login'>
-          <a>Login</a>
-        </Link>
-      </li>
-      <li>
-        <Link href='/signup'>
-          <a>Sign up</a>
-        </Link>
-      </li>
-      <li id='user'>
-        <UserNav />
-      </li>
-    </ul>
-
-    <style jsx>
-      {`
-        ul {
+const Nav = () => {
+  return (
+    <>
+      <input type='checkbox' id='nav-toggle' className='nav-toggle' />
+      <label htmlFor='nav-toggle' className='nav-toggle-label'>
+        <span></span>
+      </label>
+      <nav>
+        <ul>
+          <li>
+            <Link href='/trainings'>
+              <a>
+                <FontAwesomeIcon icon={faCalendarAlt} />
+                Archive
+              </a>
+            </Link>
+          </li>
+          <li>
+            <Link href='/timer'>
+              <a>
+                <FontAwesomeIcon icon={faStopwatch20} />
+                Timer
+              </a>
+            </Link>
+          </li>
+          <UserNav />
+        </ul>
+      </nav>
+
+      <style jsx>{`
+        nav {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 400ms ease-in-out;
+          position: absolute;
+          text-align: left;
+          top: 100%;
+          left: 0;
+          width: 100%;
+          background-color: ${theme.colors.nav};
+          align-content: end;
+        }
+
+        .nav-toggle:checked ~ nav {
+          max-height: 100vh;
+        }
+
+        nav ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        :global(nav li) {
+          margin: 0 0.2em;
+          padding: 0.6em 1.5em;
+          border-bottom: 1px solid #696969e7;
+        }
+
+        :global(nav svg) {
+          width: 0.8em;
+          margin-right: 0.7em;
+        }
+
+        :global(nav a) {
+          color: ${theme.colors.offWhite};
+          text-decoration: none;
+          font-size: 1.2rem;
+          text-transform: uppercase;
+        }
+
+        .nav-toggle {
+          display: none;
+        }
+
+        .nav-toggle-label {
+          position: absolute;
+          top: 0;
+          left: 0;
+          margin-left: 1em;
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+
+        .nav-toggle-label span {
           display: grid;
+          align-items: center;
+          border: 2px solid #5d6a6bff;
+          transition: all 400ms ease-in-out;
+          height: 4px;
+          width: 2em;
+          border-radius: 2px;
+          margin: 0;
+          padding: 0;
+        }
+        .nav-toggle-label span::before,
+        .nav-toggle-label span::after {
+          content: '';
+          height: 4px;
+          background-color: #5d6a6bff;
+          border-radius: 2px;
+          position: absolute;
+          left: 0.2em;
+          right: 0.2em;
+          transform: rotate(0deg);
+          transition: all 200ms ease-in-out 200ms;
+        }
+        .nav-toggle-label span::before {
+          transform: translate(0, -8px);
+        }
+        .nav-toggle-label span::after {
+          transform: translate(0, 8px);
+        }
+
+        .nav-toggle:checked ~ .nav-toggle-label span {
+          height: 2em;
+          width: 2em;
+          background-color: #5d6a6b00;
+          border: 2px solid #5d6a6b55;
+          border-radius: 0px;
         }
 
-        li {
-          padding: 0 0.5em;
-          border-bottom: 1px solid ${theme.colors.lightgrey};
+        .nav-toggle:checked ~ .nav-toggle-label span::before {
+          transform: rotate(45deg) translate(0);
         }
 
-        @media (min-width: 500px) {
-          ul {
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            border-bottom: 1px solid ${theme.colors.lightgrey};
+        .nav-toggle:checked ~ .nav-toggle-label span::after {
+          transform: rotate(-45deg) translate(0);
+        }
+
+        @media screen and (min-width: 768px) {
+          .nav-toggle-label {
+            display: none;
           }
-          li {
-            display: inline;
+          nav {
+            all: unset;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+          }
+
+          :global(nav li) {
+            display: inline-block;
             border-bottom: none;
+            position: relative;
+            text-align: center;
           }
-        }
 
-        #search {
-          grid-column-end: -2;
-        }
+          :global(nav li::after) {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 1px;
+            left: 10%;
+            right: 10%;
+            transform: scale(0, 1);
+            transition: all 300ms ease-in-out;
+            bottom: 0;
+            background-color: ${theme.colors.darkerblue};
+          }
+
+          :global(nav li:hover::after) {
+            background-color: ${theme.colors.blue};
+            transform: scale(1, 1);
+          }
+
+          :global(nav a) {
+            color: ${theme.colors.darkerblue};
+          }
 
-        #user {
-          grid-column-end: -1;
+          :global(nav a:hover) {
+            color: ${theme.colors.blue};
+          }
         }
-      `}
-    </style>
-  </nav>
-)
+      `}</style>
+    </>
+  )
+}
 
 export default Nav

frontend/src/app/components/Page.tsx

@@ -1,7 +1,5 @@
-import Head from 'next/head'
 import Header from './Header'
 import Meta from './Meta'
-import Nav from './Nav'
 import Footer from './Footer'
 import GlobalStyle from '../../styles/global'
 

frontend/src/styles/global.ts

@@ -27,14 +27,11 @@ const GlobalStyle = css.global`
     display: grid;
     grid-template-areas:
       'header'
-      'nav'
       'main'
       'footer';
-    grid-template-rows: auto auto 1fr minmax(180px, auto);
+    grid-template-rows: auto auto 1fr minmax(140px, auto);
 
-    max-width: ${theme.maxWidth};
     min-height: 100vh;
-    margin: 0 auto;
 
     background: ${theme.colors.offWhite};
     color: ${theme.colors.black};
@@ -44,7 +41,7 @@ const GlobalStyle = css.global`
   @media (min-width: 500px) {
     body #__next {
       grid-template-areas:
-        'header nav'
+        'header header'
         'main main'
         'footer footer';
       grid-template-columns: auto 1fr;
@@ -55,11 +52,10 @@ const GlobalStyle = css.global`
   header {
     grid-area: header;
   }
-  nav {
-    grid-area: nav;
-  }
   main {
     grid-area: main;
+    max-width: ${theme.maxWidth};
+    margin: 0 auto;
   }
   footer {
     grid-area: footer;
@@ -73,6 +69,7 @@ const GlobalStyle = css.global`
   h5,
   h6 {
     font-weight: 900;
+    color: ${theme.colors.darkerblue};
   }
 
   /* Use monospace font for pre */

frontend/src/styles/theme.ts

@@ -11,7 +11,8 @@ const theme = {
     blue: '#4482c3',
     darkblue: '#285680',
     darkerblue: '#204567',
-    offWhite: '#EDEDED'
+    offWhite: '#EDEDED',
+    nav: '#393939e7'
   },
   maxWidth: '1000px',
   bs: '0 12px 24px 0 rgba(0,0,0,0.09)',