Clicking on menu button toggles it

This is an affordance for mobile (and how we got here)

components/Button/index.scss

@@ -10,7 +10,8 @@
   gap: 6px;
 
   &:hover,
-  &.Blended:hover {
+  &.Blended:hover,
+  &.Blended.Active {
     background: var(--button-bg-hover);
     cursor: pointer;
     color: var(--button-text-hover);

components/Header/index.tsx

@@ -29,11 +29,16 @@ const Header = () => {
   const router = useRouter()
 
   // State management
+  const [open, setOpen] = useState(false)
 
   // Snapshots
   const { account } = useSnapshot(accountState)
   const { party } = useSnapshot(appState)
 
+  function menuButtonClicked() {
+    setOpen(!open)
+  }
+
   function onClickOutsideMenu() {
     setOpen(!open)
   }
@@ -124,6 +129,7 @@ const Header = () => {
         />
         <HeaderMenu
           authenticated={account.authorized}
+          open={open}
           username={account.user?.username}
           onClickOutside={onClickOutsideMenu}
           logout={logout}

components/HeaderMenu/index.tsx

@@ -18,6 +18,7 @@ import { accountState } from '~utils/accountState'
 
 interface Props {
   authenticated: boolean
+  open: boolean
   username?: string
   logout?: () => void
 }
@@ -51,10 +52,15 @@ const HeaderMenu = (props: Props) => {
     router.push(router.asPath, undefined, { locale: language })
   }
 
+  const menuClasses = classNames({
+    Menu: true,
+    auth: props.authenticated,
+    open: props.open,
+  })
+
   function authItems() {
     return (
       <nav>
-        <ul className="Menu auth">
           <div className="MenuGroup">
             <li className="MenuItem profile">
               <Link href={`/${accountData.username}` || ''} passHref>
@@ -80,6 +86,7 @@ const HeaderMenu = (props: Props) => {
             </li>
 
             <li className="MenuItem disabled">
+      <ul className={menuClasses}>
               <div>
                 <span>{t('menu.guides')}</span>
                 <i className="tag">{t('coming_soon')}</i>
@@ -110,7 +117,7 @@ const HeaderMenu = (props: Props) => {
 
   function unauthItems() {
     return (
-      <ul className="Menu unauth">
+      <ul className={menuClasses}>
         <div className="MenuGroup">
           <li className="MenuItem language">
             <span>{t('menu.language')}</span>