Merge pull request #513 from gabehab/dev

Create mobile menu

components/layout/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
@@ -13,40 +13,66 @@ import styles from './Header.module.css';
 
 export default function Header() {
   const user = useSelector(state => state.user);
+  const [active, setActive] = useState(false);
+
+  function handleClick() {
+    setActive(state => !state);
+  }
 
   return (
-    <header className="container">
+    <nav className="container">
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col-6 col-lg-3 order-1 order-lg-1">
-          <div className={styles.title}>
-            <Icon icon={<Logo />} size="large" className={styles.logo} />
-            <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
+        <div className={styles.nav}>
+          <div className="">
+            <div className={styles.title}>
+              <Icon icon={<Logo />} size="large" className={styles.logo} />
+              <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
+            </div>
           </div>
-        </div>
-        <div className="col-12 col-lg-6 order-3 order-lg-2">
+          <button
+            onClick={handleClick}
+            role="button"
+            className={styles.burger}
+            aria-label="menu"
+            aria-expanded="false"
+          >
+            {active ? (
+              <div> X </div>
+            ) : (
+              <>
+                <span></span>
+                <span></span>
+                <span></span>
+              </>
+            )}
+          </button>
           {user && (
-            <div className={styles.nav}>
-              <Link href="/dashboard">
-                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-              </Link>
-              <Link href="/realtime">
-                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-              </Link>
-              <Link href="/settings">
-                <FormattedMessage id="label.settings" defaultMessage="Settings" />
-              </Link>
+            <div className={styles.items}>
+              <div className={active ? classNames(styles.active) : ''}>
+                <Link href="/dashboard">
+                  <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+                </Link>
+                <Link href="/realtime">
+                  <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+                </Link>
+                <Link href="/settings">
+                  <FormattedMessage id="label.settings" defaultMessage="Settings" />
+                </Link>
+              </div>
             </div>
           )}
-        </div>
-        <div className="col-6 col-lg-3 order-2 order-lg-3">
-          <div className={styles.buttons}>
-            <ThemeButton />
-            <LanguageButton menuAlign="right" />
-            {user && <UserButton />}
+          <div className={styles.items}>
+            <div className={active ? classNames(styles.active) : ''}>
+              <div className={styles.buttons}>
+                <ThemeButton />
+                <LanguageButton menuAlign="right" />
+                {user && <UserButton />}
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </header>
+    </nav>
   );
 }

components/layout/Header.module.css

@@ -1,6 +1,19 @@
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.burger {
+  display: none;
+}
+
 .header {
   display: flex;
   min-height: 100px;
+  width: 100%;
 }
 
 .title {
@@ -15,6 +28,15 @@
 }
 
 .nav {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  font-weight: 600;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.items {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -35,16 +57,75 @@
 @media only screen and (max-width: 992px) {
   .nav {
     font-size: var(--font-size-large);
-    justify-content: center;
-    padding: 20px 0;
+    justify-content: space-between;
+    margin: 20px 0;
+  }
+  .items {
+    flex-wrap: wrap;
   }
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 768px) {
   .header {
     padding: 0 15px;
   }
+
   .nav {
     font-size: var(--font-size-normal);
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .items {
+    display: flex;
+    justify-content: unset;
+    align-items: left;
+    font-size: var(--font-size-normal);
+    font-weight: 600;
+  }
+
+  .items > div {
+    display: none;
+  }
+
+  .header .active {
+    display: inherit;
+    width: 100%;
+  }
+
+  .items a {
+    width: 100%;
+  }
+
+  .burger {
+    display: block;
+    /* color: #4a4a4a; */
+    cursor: pointer;
+    height: 3.25rem;
+    width: 3.25rem;
+    margin-left: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .burger span {
+    transform: translateX(-50%);
+    padding: 1px 0px;
+    margin: 6px 0;
+    width: 20px;
+    display: block;
+    background-color: white;
+  }
+
+  .burger div {
+    height: 100%;
+    color: white;
+    text-align: center;
+    margin: auto;
+    font-size: 1.5rem;
+    transform: translateX(-50%);
   }
 }