HeaderMenu should always be in a <nav>

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>
+                <span>{data?.account.username}</span>
-                <i className="tag">{t('coming_soon')}</i>
+                <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>
+            </Link>
-          </div>
+          </li>
-          <div className="MenuGroup">
+          <li className="MenuItem">
-            <AboutModal />
+            <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
-            <ChangelogModal />
+          </li>
-            <RoadmapModal />
+        </div>
-          </div>
+        <div className="MenuGroup">
-          <div className="MenuGroup">
+          <li className="MenuItem">
-            <AccountModal
+            <Link href="/teams">{t('menu.teams')}</Link>
-              username={accountState.account.user?.username}
+          </li>
-              picture={accountState.account.user?.picture}
+
-              gender={accountState.account.user?.gender}
+          <li className="MenuItem disabled">
-              language={accountState.account.user?.language}
+            <div>
-              theme={accountState.account.user?.theme}
+              <span>{t('menu.guides')}</span>
-            />
+              <i className="tag">{t('coming_soon')}</i>
-            <li className="MenuItem" onClick={props.logout}>
+            </div>
-              <span>{t('menu.logout')}</span>
+          </li>
-            </li>
+        </div>
-          </div>
+        <div className="MenuGroup">
-        </ul>
+          <AboutModal />
-      </nav>
+          <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