From bab5d4189e7160c8808adbb3004edde74268911b Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 16 Jan 2022 23:14:46 -0500
Subject: [PATCH] close hamburger when anything clicked (hack)

---
 fakeyou/src/migration/MigrationTopNav.tsx     |   1 +
 .../src/migration/MigrationTopNav_Session.tsx |   8 +-
 fakeyou/src/v2/view/NewTopNavFc.tsx           | 135 ++++++++++--------
 3 files changed, 83 insertions(+), 61 deletions(-)

diff --git a/fakeyou/src/migration/MigrationTopNav.tsx b/fakeyou/src/migration/MigrationTopNav.tsx
index fa351bb604..5f9d4d31cc 100644
--- a/fakeyou/src/migration/MigrationTopNav.tsx
+++ b/fakeyou/src/migration/MigrationTopNav.tsx
@@ -23,6 +23,7 @@ function MigrationTopNav(props: Props) {
         sessionWrapper={props.sessionWrapper}
         enableAlpha={props.enableAlpha}
         querySessionAction={props.querySessionAction}
+        closeHamburgerAction={() => {}} // No-op
         />
     </nav>
   )
diff --git a/fakeyou/src/migration/MigrationTopNav_Session.tsx b/fakeyou/src/migration/MigrationTopNav_Session.tsx
index df367fda82..47827b7000 100644
--- a/fakeyou/src/migration/MigrationTopNav_Session.tsx
+++ b/fakeyou/src/migration/MigrationTopNav_Session.tsx
@@ -7,6 +7,7 @@ interface Props {
   sessionWrapper: SessionWrapper,
   enableAlpha: boolean,
   querySessionAction: () => void,
+  closeHamburgerAction: () => void,
 }
 
 function MigrationTopNavSession(props: Props) {
@@ -62,18 +63,23 @@ function MigrationTopNavSession(props: Props) {
     sessionLink = (
       <Link
         to={url}
+        onClick={() => props.closeHamburgerAction()}
         className="button is-alert is-inverted is-pulled-right"
         > {gravatar}&nbsp; {displayName}</Link>
     );
     logoutLink = <button
         className="button is-alert is-inverted is-pulled-right"
-        onClick={logoutHandler}
+        onClick={() => {
+          logoutHandler();
+          props.closeHamburgerAction();
+        }}
       >Logout</button>;
   } else {
     sessionLink = (
       <Link
         to="/signup"
         className="button is-danger is-pulled-right"
+        onClick={() => props.closeHamburgerAction()}
         >Sign Up / Login</Link>
     );
   }
diff --git a/fakeyou/src/v2/view/NewTopNavFc.tsx b/fakeyou/src/v2/view/NewTopNavFc.tsx
index b67ad11a44..2396c378c7 100644
--- a/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -25,81 +25,96 @@ function NewTopNavFc(props: Props) {
     setMobileHamburgerIsActive(!mobileHamburgerIsActive);
   }
 
+  const closeHamburger = () => { 
+    // TODO: This is an ergonomic hack. 
+    // The hamburger ideally should close whenever it is no longer active.
+    setMobileHamburgerIsActive(false);
+  }
+
   const navbarClasses = mobileHamburgerIsActive ? "navbar-menu is-active" : "navbar-menu";
   const navbarBurgerClasses = mobileHamburgerIsActive ? "navbar-burger is-active" : "navbar-burger";
 
   return (
     <>
-    <nav className="navbar is-transparent padding-bottom-1em">
-      <div className="navbar-brand">
-        <Link className="navbar-item" to="/">
-          <img src="/fakeyou/fakeyou-nav-logo.png" alt="FakeYou: Cartoon and Celebrity Text to Speech" />
-        </Link>
-        <div className={navbarBurgerClasses} data-target="navbarExampleTransparentExample" onClick={() => toggleHamburger()}>
-          <span></span>
-          <span></span>
-          <span></span>
+      <nav className="navbar is-transparent padding-bottom-1em">
+        <div className="navbar-brand">
+          <Link className="navbar-item" to="/">
+            <img src="/fakeyou/fakeyou-nav-logo.png" alt="FakeYou: Cartoon and Celebrity Text to Speech" />
+          </Link>
+          <div className={navbarBurgerClasses} data-target="navbarExampleTransparentExample" onClick={() => toggleHamburger()}>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
         </div>
-      </div>
 
-      <div id="navbarExampleTransparentExample" className={navbarClasses}>
-        <div className="navbar-start">
+        <div id="navbarExampleTransparentExample" className={navbarClasses}>
+          <div className="navbar-start">
 
-          <Link to="/"
-            className="navbar-item"
-            >TTS</Link>
+            <Link to="/"
+              className="navbar-item"
+              onClick={() => closeHamburger()}
+              >TTS</Link>
 
-          <Link to="/video"
-            className="navbar-item"
-            >Video</Link>
-
-          <div className="navbar-item has-dropdown is-hoverable">
-            <Link to={myDataLink}
-              className="navbar-link"
-              >Community</Link>
-
-            <div className="navbar-dropdown is-boxed">
-
-              <Link to="/contribute"
-                className="navbar-item"
-                >Contribute / Upload</Link>
-
-              <Link to="/leaderboard"
-                className="navbar-item"
-                >Leaderboard</Link>
-
-              <Link to={FrontendUrlConfig.patronsPage()}
-                className="navbar-item"
-                >Patrons</Link>
-
-              <Link to="/firehose"
-                className="navbar-item"
-                >Feed</Link>
-
-              <hr className="navbar-divider" />
+            <Link to="/video"
+              className="navbar-item"
+              onClick={() => closeHamburger()}
+              >Video</Link>
 
+            <div className="navbar-item has-dropdown is-hoverable">
               <Link to={myDataLink}
-                className="navbar-item is-active"
-                >My Data</Link>
-            </div>
-          </div>
-        </div>
+                className="navbar-link"
+                onClick={() => closeHamburger()}
+                >Community</Link>
 
-        <div className="navbar-end">
-          <div className="navbar-item">
-            <div className="field is-grouped">
-              <p className="control">
-                <MigrationTopNavSession
-                  sessionWrapper={props.sessionWrapper}
-                  enableAlpha={true}
-                  querySessionAction={props.querySessionCallback}
-                  />
-              </p>
+              <div className="navbar-dropdown is-boxed">
+
+                <Link to="/contribute"
+                  className="navbar-item"
+                  onClick={() => closeHamburger()}
+                  >Contribute / Upload</Link>
+
+                <Link to="/leaderboard"
+                  className="navbar-item"
+                  onClick={() => closeHamburger()}
+                  >Leaderboard</Link>
+
+                <Link to={FrontendUrlConfig.patronsPage()}
+                  className="navbar-item"
+                  onClick={() => closeHamburger()}
+                  >Patrons</Link>
+
+                <Link to="/firehose"
+                  className="navbar-item"
+                  onClick={() => closeHamburger()}
+                  >Feed</Link>
+
+                <hr className="navbar-divider" />
+
+                <Link to={myDataLink}
+                  className="navbar-item is-active"
+                  onClick={() => closeHamburger()}
+                  >My Data</Link>
+              </div>
+            </div>
+          </div>
+
+          <div className="navbar-end">
+            <div className="navbar-item">
+              <div className="field is-grouped">
+                <p className="control">
+                  <MigrationTopNavSession
+                    sessionWrapper={props.sessionWrapper}
+                    enableAlpha={true}
+                    querySessionAction={props.querySessionCallback}
+                    closeHamburgerAction={() => closeHamburger()}
+                    />
+                </p>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </nav>
+      </nav>
     </>
   )
 }