Updated mobile menu.

components/layout/Header.js

@@ -8,10 +8,13 @@ import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
 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 { rtlLocales } from 'lib/lang';
+import XMark from 'assets/xmark.svg';
+import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -33,23 +36,11 @@ export default function Header() {
               <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
             </div>
           </div>
-          <button
-            onClick={handleClick}
-            role="button"
+          <Button
             className={styles.burger}
-            aria-label="menu"
-            aria-expanded="false"
-          >
-            {active ? (
-              <div> X </div>
-            ) : (
-              <>
-                <span></span>
-                <span></span>
-                <span></span>
-              </>
-            )}
-          </button>
+            icon={active ? <XMark /> : <Bars />}
+            onClick={handleClick}
+          />
           {user && (
             <div className={styles.items}>
               <div className={active ? classNames(styles.active) : ''}>

components/layout/Header.module.css

@@ -86,7 +86,6 @@
   .items {
     display: flex;
     justify-content: unset;
-    align-items: left;
     font-size: var(--font-size-normal);
     font-weight: 600;
   }
@@ -106,34 +105,12 @@
 
   .burger {
     display: block;
-    /* color: #4a4a4a; */
     background: none;
     border: 1px solid var(--gray900);
     border-radius: 4px;
     cursor: pointer;
-    height: 3.25rem;
-    width: 3.25rem;
-    margin-left: auto;
     position: absolute;
-    right: 0;
     top: 0;
-  }
-
-  .burger span {
-    transform: translateX(25%);
-    padding: 1px 0px;
-    margin: 6px 0;
-    width: 65%;
-    display: block;
-    background-color: var(--gray900);
-  }
-
-  .burger div {
-    /* height: 100%; */
-    color: var(--gray900);
-    text-align: center;
-    margin: auto;
-    font-size: 1.5rem;
-    /* transform: translateX(-50%); */
+    right: 0;
   }
 }