Responsive updates.

components/common/HamburgerButton.js

@@ -3,11 +3,12 @@ import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
-import styles from './HamburgerButton.module.css';
+import useConfig from 'hooks/useConfig';
 
 export default function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
+  const { cloudMode } = useConfig();
 
   const menuItems = [
     {
@@ -15,7 +16,7 @@ export default function HamburgerButton() {
       value: '/dashboard',
     },
     { label: formatMessage(labels.realtime), value: '/realtime' },
-    {
+    !cloudMode && {
       label: formatMessage(labels.settings),
       value: '/settings',
     },
@@ -23,20 +24,15 @@ export default function HamburgerButton() {
       label: formatMessage(labels.profile),
       value: '/settings/profile',
     },
-    { label: formatMessage(labels.logout), value: '/logout' },
-  ];
+    !cloudMode && { label: formatMessage(labels.logout), value: '/logout' },
+  ].filter(n => n);
 
-  function handleClick() {
-    setActive(state => !state);
-  }
-
-  function handleClose() {
-    setActive(false);
-  }
+  const handleClick = () => setActive(state => !state);
+  const handleClose = () => setActive(false);
 
   return (
     <>
-      <Button className={styles.button} onClick={handleClick}>
+      <Button variant="quiet" onClick={handleClick}>
         <Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
       </Button>
       {active && <MobileMenu items={menuItems} onClose={handleClose} />}

components/common/MobileMenu.js

@@ -1,19 +1,10 @@
 import classNames from 'classnames';
 import Link from 'next/link';
-import { Button, Icon } from 'react-basics';
-import Icons from 'components/icons';
 import styles from './MobileMenu.module.css';
 
 export default function MobileMenu({ items = [], onClose }) {
   return (
     <div className={classNames(styles.menu)}>
-      <div className={styles.header}>
-        <Button onClick={onClose}>
-          <Icon>
-            <Icons.Close />
-          </Icon>
-        </Button>
-      </div>
       <div className={styles.items}>
         {items.map(({ label, value }) => (
           <Link key={value} href={value} className={styles.item} onClick={onClose}>

components/common/MobileMenu.module.css

@@ -1,6 +1,6 @@
 .menu {
   position: fixed;
-  top: 0;
+  top: 60px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -13,29 +13,17 @@
 }
 
 .items {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
 .item {
   font-size: var(--font-size-lg);
+  font-weight: 700;
+  line-height: 80px;
+  padding: 0 40px;
 }
 
-.item + .item {
-  margin-top: 20px;
-}
-
-.item:last-child {
-  margin-top: 60px;
-}
-
-.header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100px;
-  padding: 0 30px;
+a.item {
+  color: var(--base900);
 }