Add new mobile hamburger menu for mobile

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';
@@ -10,43 +10,67 @@ import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
 
 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.nav}>
-          <div className={styles.title}>
+          <div className="">
-            <Icon icon={<Logo />} size="large" className={styles.logo} />
+            <div className={styles.title}>
-            <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
+              <Icon icon={<Logo />} size="large" className={styles.logo} />
+              <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
+            </div>
           </div>
-        </div>
+          <button
-        <div className="col-12 col-lg-6 order-3 order-lg-2">
+            onClick={handleClick}
+            role="button"
+            className={styles.burger}
+            aria-label="menu"
+            aria-expanded="false"
+          >
+            {active ? (
+              <Icon icon={<Sun />} size="large" className={styles.logo} />
+            ) : (
+              <Icon icon={<Moon />} size="large" className={styles.logo} />
+            )}
+          </button>
           {user && (
-            <div className={styles.nav}>
+            <div className={styles.items}>
-              <Link href="/dashboard">
+              <div className={active ? classNames(styles.active) : ''}>
-                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+                <Link href="/dashboard">
-              </Link>
+                  <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-              <Link href="/realtime">
+                </Link>
-                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+                <Link href="/realtime">
-              </Link>
+                  <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-              <Link href="/settings">
+                </Link>
-                <FormattedMessage id="label.settings" defaultMessage="Settings" />
+                <Link href="/settings">
-              </Link>
+                  <FormattedMessage id="label.settings" defaultMessage="Settings" />
+                </Link>
+              </div>
             </div>
           )}
-        </div>
+          <div className={styles.items}>
-        <div className="col-6 col-lg-3 order-2 order-lg-3">
+            <div className={active ? classNames(styles.active) : ''}>
-          <div className={styles.buttons}>
+              <div className={styles.buttons}>
-            <ThemeButton />
+                <ThemeButton />
-            <LanguageButton menuAlign="right" />
+                <LanguageButton menuAlign="right" />
-            {user && <UserButton />}
+                {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;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  font-weight: 600;
+  width: 100%;
+}
+
+.items {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,7 +66,40 @@
   .header {
     padding: 0 15px;
   }
+
   .nav {
     font-size: var(--font-size-normal);
+    flex-wrap: wrap;
+  }
+
+  .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;
+    position: relative;
+    width: 3.25rem;
+    margin-left: auto;
   }
 }