From 34ad1d9c39e3a41b31f5aea45228ac005f5b34bd Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 28 Feb 2022 18:39:37 -0800
Subject: [PATCH] New mobile menu.

---
 assets/bars.svg                              |  2 +-
 assets/xmark.svg                             |  2 +-
 components/common/HamburgerButton.js         | 44 ++++++++++
 components/common/HamburgerButton.module.css |  9 +++
 components/common/Link.js                    |  3 +-
 components/common/Link.module.css            | 10 +--
 components/common/MobileMenu.js              | 21 +++++
 components/common/MobileMenu.module.css      | 40 ++++++++++
 components/layout/Footer.js                  | 39 +++++----
 components/layout/Footer.module.css          |  2 +-
 components/layout/Header.js                  | 79 +++++++-----------
 components/layout/Header.module.css          | 84 ++++----------------
 lib/constants.js                             |  2 +
 pages/_app.js                                |  5 +-
 14 files changed, 189 insertions(+), 153 deletions(-)
 create mode 100644 components/common/HamburgerButton.js
 create mode 100644 components/common/HamburgerButton.module.css
 create mode 100644 components/common/MobileMenu.js
 create mode 100644 components/common/MobileMenu.module.css

diff --git a/assets/bars.svg b/assets/bars.svg
index 91c83c48..fdb2d6e4 100644
--- a/assets/bars.svg
+++ b/assets/bars.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C11 392 0 403 0 416V416C0 429 11 440 24 440H424C437 440 448 429 448 416V416C448 403 437 392 424 392ZM424 72H24C11 72 0 83 0 96V96C0 109 11 120 24 120H424C437 120 448 109 448 96V96C448 83 437 72 424 72ZM424 232H24C11 232 0 243 0 256V256C0 269 11 280 24 280H424C437 280 448 269 448 256V256C448 243 437 232 424 232Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C10.8 392 0 402.8 0 416V416C0 429.2 10.8 440 24 440H424C437.2 440 448 429.2 448 416V416C448 402.8 437.2 392 424 392ZM424 72H24C10.8 72 0 82.8 0 96V96C0 109.2 10.8 120 24 120H424C437.2 120 448 109.2 448 96V96C448 82.8 437.2 72 424 72ZM424 232H24C10.8 232 0 242.8 0 256V256C0 269.2 10.8 280 24 280H424C437.2 280 448 269.2 448 256V256C448 242.8 437.2 232 424 232Z"/></svg>
\ No newline at end of file
diff --git a/assets/xmark.svg b/assets/xmark.svg
index 6d72bf6d..340f479e 100644
--- a/assets/xmark.svg
+++ b/assets/xmark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M345 375C354 384 354 400 345 409S320 418 311 409L192 290L73 409C64 418 48 418 39 409S30 384 39 375L158 256L39 137C30 128 30 112 39 103S64 94 73 103L192 222L311 103C320 94 336 94 345 103S354 128 345 137L226 256L345 375Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M312.973 375.032C322.342 384.401 322.342 399.604 312.973 408.973S288.401 418.342 279.032 408.973L160 289.941L40.968 408.973C31.599 418.342 16.396 418.342 7.027 408.973S-2.342 384.401 7.027 375.032L126.059 256L7.027 136.968C-2.342 127.599 -2.342 112.396 7.027 103.027S31.599 93.658 40.968 103.027L160 222.059L279.032 103.027C288.401 93.658 303.604 93.658 312.973 103.027S322.342 127.599 312.973 136.968L193.941 256L312.973 375.032Z"/></svg>
\ No newline at end of file
diff --git a/components/common/HamburgerButton.js b/components/common/HamburgerButton.js
new file mode 100644
index 00000000..501b8c95
--- /dev/null
+++ b/components/common/HamburgerButton.js
@@ -0,0 +1,44 @@
+import Button from 'components/common/Button';
+import XMark from 'assets/xmark.svg';
+import Bars from 'assets/bars.svg';
+import { useState } from 'react';
+import styles from './HamburgerButton.module.css';
+import MobileMenu from './MobileMenu';
+import { FormattedMessage } from 'react-intl';
+
+const menuItems = [
+  {
+    label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
+    value: '/dashboard',
+  },
+  { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
+  { label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
+  {
+    label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
+    value: '/settings/profile',
+  },
+  { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
+];
+
+export default function HamburgerButton() {
+  const [active, setActive] = useState(false);
+
+  function handleClick() {
+    setActive(state => !state);
+  }
+
+  function handleClose() {
+    setActive(false);
+  }
+
+  return (
+    <>
+      <Button
+        className={styles.button}
+        icon={active ? <XMark /> : <Bars />}
+        onClick={handleClick}
+      />
+      {active && <MobileMenu items={menuItems} onClose={handleClose} />}
+    </>
+  );
+}
diff --git a/components/common/HamburgerButton.module.css b/components/common/HamburgerButton.module.css
new file mode 100644
index 00000000..60398585
--- /dev/null
+++ b/components/common/HamburgerButton.module.css
@@ -0,0 +1,9 @@
+.button {
+  display: none;
+}
+
+@media only screen and (max-width: 768px) {
+  .button {
+    display: flex;
+  }
+}
diff --git a/components/common/Link.js b/components/common/Link.js
index f0fad731..f683f5df 100644
--- a/components/common/Link.js
+++ b/components/common/Link.js
@@ -5,7 +5,7 @@ import NextLink from 'next/link';
 import Icon from './Icon';
 import styles from './Link.module.css';
 
-function Link({ className, icon, children, size, iconRight, ...props }) {
+function Link({ className, icon, children, size, iconRight, onClick, ...props }) {
   return (
     <NextLink {...props}>
       <a
@@ -15,6 +15,7 @@ function Link({ className, icon, children, size, iconRight, ...props }) {
           [styles.xsmall]: size === 'xsmall',
           [styles.iconRight]: iconRight,
         })}
+        onClick={onClick}
       >
         {icon && <Icon className={styles.icon} icon={icon} size={size} />}
         {children}
diff --git a/components/common/Link.module.css b/components/common/Link.module.css
index ea6d281d..e37c0105 100644
--- a/components/common/Link.module.css
+++ b/components/common/Link.module.css
@@ -8,20 +8,14 @@ a.link:visited {
   align-items: center;
 }
 
-a.link:before {
+a.link:hover:before {
   content: '';
   position: absolute;
   bottom: -2px;
-  width: 0;
+  width: 100%;
   height: 2px;
   background: var(--primary400);
   opacity: 0.5;
-  transition: width 100ms;
-}
-
-a.link:hover:before {
-  width: 100%;
-  transition: width 100ms;
 }
 
 a.link.large {
diff --git a/components/common/MobileMenu.js b/components/common/MobileMenu.js
new file mode 100644
index 00000000..00da4783
--- /dev/null
+++ b/components/common/MobileMenu.js
@@ -0,0 +1,21 @@
+import Link from './Link';
+import Button from './Button';
+import XMark from 'assets/xmark.svg';
+import styles from './MobileMenu.module.css';
+
+export default function MobileMenu({ items = [], onClose }) {
+  return (
+    <div className={styles.menu}>
+      <div className={styles.header}>
+        <Button className={styles.button} icon={<XMark />} onClick={onClose} />
+      </div>
+      <div className={styles.items}>
+        {items.map(({ label, value }) => (
+          <Link key={value} href={value} className={styles.item} onClick={onClose}>
+            {label}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css
new file mode 100644
index 00000000..5bc2a377
--- /dev/null
+++ b/components/common/MobileMenu.module.css
@@ -0,0 +1,40 @@
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gray50);
+  overflow: auto;
+}
+
+.items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.item {
+  font-size: var(--font-size-large);
+}
+
+.item + .item {
+  margin-top: 20px;
+}
+
+.button {
+  margin-right: 15px;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100px;
+}
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 33eda5e2..603b9369 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -4,32 +4,29 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
-import useLocale from 'hooks/useLocale';
+import { HOMEPAGE_URL, VERSION_URL } from 'lib/constants';
 
 export default function Footer() {
   const { current } = useVersion();
-  const { dir } = useLocale();
 
   return (
-    <footer className="container" dir={dir}>
-      <div className={classNames(styles.footer, 'row')}>
-        <div className="col-12 col-md-4" />
-        <div className="col-12 col-md-4">
-          <FormattedMessage
-            id="message.powered-by"
-            defaultMessage="Powered by {name}"
-            values={{
-              name: (
-                <Link href="https://umami.is">
-                  <b>umami</b>
-                </Link>
-              ),
-            }}
-          />
-        </div>
-        <div className={classNames(styles.version, 'col-12 col-md-4')}>
-          <Link href={`https://github.com/mikecao/umami/releases`}>{`v${current}`}</Link>
-        </div>
+    <footer className={classNames(styles.footer, 'row')}>
+      <div className="col-12 col-md-4" />
+      <div className="col-12 col-md-4">
+        <FormattedMessage
+          id="message.powered-by"
+          defaultMessage="Powered by {name}"
+          values={{
+            name: (
+              <Link href={HOMEPAGE_URL}>
+                <b>umami</b>
+              </Link>
+            ),
+          }}
+        />
+      </div>
+      <div className={classNames(styles.version, 'col-12 col-md-4')}>
+        <Link href={VERSION_URL}>{`v${current}`}</Link>
       </div>
     </footer>
   );
diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css
index c04fd9fc..1a7baaa8 100644
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@@ -3,8 +3,8 @@
   justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-small);
-  min-height: 100px;
   text-align: center;
+  margin: 20px 0;
 }
 
 .version {
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 0baaaed7..bf6990ca 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -1,71 +1,48 @@
-import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
+import HamburgerButton from 'components/common/HamburgerButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
-import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
-import useLocale from 'hooks/useLocale';
-import XMark from 'assets/xmark.svg';
-import Bars from 'assets/bars.svg';
 import useUser from 'hooks/useUser';
+import { HOMEPAGE_URL } from 'lib/constants';
 
 export default function Header() {
   const { user } = useUser();
-  const [active, setActive] = useState(false);
-  const { dir } = useLocale();
-
-  function handleClick() {
-    setActive(state => !state);
-  }
 
   return (
-    <nav className="container" dir={dir}>
+    <>
       {user?.is_admin && <UpdateNotice />}
-      <div className={classNames(styles.header, 'row align-items-center')}>
-        <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>
-          <Button
-            className={styles.burger}
-            icon={active ? <XMark /> : <Bars />}
-            onClick={handleClick}
-          />
-          {user && (
-            <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 className={styles.items}>
-            <div className={active ? classNames(styles.active) : ''}>
-              <div className={styles.buttons}>
-                <ThemeButton />
-                <LanguageButton menuAlign="right" />
-                {user && <UserButton />}
-              </div>
-            </div>
-          </div>
+      <header className={classNames(styles.header, 'row')}>
+        <div className={styles.title}>
+          <Icon icon={<Logo />} size="large" className={styles.logo} />
+          <Link href={user ? '/' : HOMEPAGE_URL}>umami</Link>
         </div>
-      </div>
-    </nav>
+        <HamburgerButton />
+        {user && (
+          <div className={styles.links}>
+            <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 className={styles.buttons}>
+          <ThemeButton />
+          <LanguageButton menuAlign="right" />
+          {user && <UserButton />}
+        </div>
+      </header>
+    </>
   );
 }
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
index 55b35c4f..45df94ca 100644
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -1,17 +1,6 @@
-.navbar {
-  align-items: stretch;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.burger {
-  display: none;
-}
-
 .header {
   display: flex;
+  align-items: center;
   min-height: 100px;
   width: 100%;
 }
@@ -27,16 +16,8 @@
   margin-right: 12px;
 }
 
-.nav {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size-normal);
-  font-weight: 600;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.items {
+.links {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,7 +25,7 @@
   font-weight: 600;
 }
 
-.nav a + a {
+.links a + a {
   margin-left: 40px;
 }
 
@@ -55,13 +36,13 @@
 }
 
 @media only screen and (max-width: 992px) {
-  .nav {
-    font-size: var(--font-size-large);
-    justify-content: space-between;
-    margin: 20px 0;
+  .header .buttons {
+    flex: 1;
   }
-  .items {
-    flex-wrap: wrap;
+  .links {
+    order: 2;
+    margin: 20px 0;
+    min-width: 100%;
   }
 }
 
@@ -70,47 +51,14 @@
     padding: 0 15px;
   }
 
-  .title {
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .nav {
-    font-size: var(--font-size-normal);
-    flex-wrap: wrap;
-    justify-content: center;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .items {
-    display: flex;
-    justify-content: unset;
-    font-size: var(--font-size-normal);
-    font-weight: 600;
-  }
-
-  .items > div {
+  .buttons,
+  .links {
     display: none;
   }
 
-  .header .active {
-    display: inherit;
-    width: 100%;
-  }
-
-  .items a {
-    width: 100%;
-  }
-
-  .burger {
-    display: block;
-    background: none;
-    border: 1px solid var(--gray900);
-    border-radius: 4px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
+  .title {
+    flex: 1;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 }
diff --git a/lib/constants.js b/lib/constants.js
index 86a2da9f..de9cef20 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -5,6 +5,8 @@ export const DATE_RANGE_CONFIG = 'umami.date-range';
 export const THEME_CONFIG = 'umami.theme';
 export const VERSION_CHECK = 'umami.version-check';
 export const TOKEN_HEADER = 'x-umami-token';
+export const HOMEPAGE_URL = 'https://umami.is';
+export const VERSION_URL = 'https://github.com/mikecao/umami/releases';
 
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_THEME = 'light';
diff --git a/pages/_app.js b/pages/_app.js
index 3eeb87c6..5c83c264 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -23,6 +23,7 @@ const Intl = ({ children }) => {
 
 export default function App({ Component, pageProps }) {
   const { basePath } = useRouter();
+  const { dir } = useLocale();
 
   return (
     <Intl>
@@ -38,7 +39,9 @@ export default function App({ Component, pageProps }) {
         <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <Component {...pageProps} />
+      <div className="container" dir={dir}>
+        <Component {...pageProps} />
+      </div>
     </Intl>
   );
 }