From 45c4e29f08c1e3ab1e1b342218b608c4288a89ec Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 27 Dec 2022 17:08:50 -0800
Subject: [PATCH] Clicking on menu button toggles it

This is an affordance for mobile (and how we got here)
---
 components/Button/index.scss    |  3 ++-
 components/Header/index.tsx     |  6 ++++++
 components/HeaderMenu/index.tsx | 11 +++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Button/index.scss b/components/Button/index.scss
index 60aea5b9..4c6415e5 100644
--- a/components/Button/index.scss
+++ b/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);
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index ad34982e..4cdfb460 100644
--- a/components/Header/index.tsx
+++ b/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}
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 48e719ac..d5eee157 100644
--- a/components/HeaderMenu/index.tsx
+++ b/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>