From 8f635c69670f96fbae53bc744b759513a12fc27c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 27 Dec 2022 17:16:34 -0800
Subject: [PATCH] HeaderMenu should always be in a <nav>

---
 components/HeaderMenu/index.tsx | 100 ++++++++++++++++----------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 14be9367..4c1baf4c 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -72,58 +72,56 @@ const HeaderMenu = (props: Props) => {
 
   function authItems() {
     return (
-      <nav>
-          <div className="MenuGroup">
-            <li className="MenuItem profile">
-              <Link href={`/${accountData.username}` || ''} passHref>
-                <div>
-                  <span>{accountData.username}</span>
-                  <img
-                    alt={userData.picture}
-                    className={`profile ${accountState.account.user?.element}`}
-                    srcSet={`/profile/${accountState.account.user?.picture}.png, 
-                      /profile/${userData.picture}@2x.png 2x`}
-                    src={`/profile/${userData.picture}.png`}
-                  />
-                </div>
-              </Link>
-            </li>
-            <li className="MenuItem">
-              <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
-            </li>
-          </div>
-          <div className="MenuGroup">
-            <li className="MenuItem">
-              <Link href="/teams">{t('menu.teams')}</Link>
-            </li>
-
-            <li className="MenuItem disabled">
       <ul className={menuClasses}>
+        <div className="MenuGroup">
+          <li className="MenuItem profile">
+            <Link href={`/${data?.account.username}` || ''} passHref>
               <div>
-                <span>{t('menu.guides')}</span>
-                <i className="tag">{t('coming_soon')}</i>
+                <span>{data?.account.username}</span>
+                <img
+                  alt={data?.user.picture}
+                  className={`profile ${data?.user.element}`}
+                  srcSet={`/profile/${data?.user.picture}.png, 
+                      /profile/${data?.user.picture}@2x.png 2x`}
+                  src={`/profile/${data?.user.picture}.png`}
+                />
               </div>
-            </li>
-          </div>
-          <div className="MenuGroup">
-            <AboutModal />
-            <ChangelogModal />
-            <RoadmapModal />
-          </div>
-          <div className="MenuGroup">
-            <AccountModal
-              username={accountState.account.user?.username}
-              picture={accountState.account.user?.picture}
-              gender={accountState.account.user?.gender}
-              language={accountState.account.user?.language}
-              theme={accountState.account.user?.theme}
-            />
-            <li className="MenuItem" onClick={props.logout}>
-              <span>{t('menu.logout')}</span>
-            </li>
-          </div>
-        </ul>
-      </nav>
+            </Link>
+          </li>
+          <li className="MenuItem">
+            <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
+          </li>
+        </div>
+        <div className="MenuGroup">
+          <li className="MenuItem">
+            <Link href="/teams">{t('menu.teams')}</Link>
+          </li>
+
+          <li className="MenuItem disabled">
+            <div>
+              <span>{t('menu.guides')}</span>
+              <i className="tag">{t('coming_soon')}</i>
+            </div>
+          </li>
+        </div>
+        <div className="MenuGroup">
+          <AboutModal />
+          <ChangelogModal />
+          <RoadmapModal />
+        </div>
+        <div className="MenuGroup">
+          <AccountModal
+            username={data?.account.username}
+            picture={data?.user.picture}
+            gender={data?.user.gender}
+            language={data?.user.language}
+            theme={data?.user.theme}
+          />
+          <li className="MenuItem" onClick={props.logout}>
+            <span>{t('menu.logout')}</span>
+          </li>
+        </div>
+      </ul>
     )
   }
 
@@ -169,7 +167,9 @@ const HeaderMenu = (props: Props) => {
     )
   }
 
-  return props.authenticated ? authItems() : unauthItems()
+  return (
+    <nav ref={ref}>{props.authenticated ? authItems() : unauthItems()}</nav>
+  )
 }
 
 export default HeaderMenu