HeaderMenu should always be in a <nav>

This commit is contained in:
Justin Edmund 2022-12-27 17:16:34 -08:00
parent 0fb30e0ac5
commit 8f635c6967

View file

@ -72,18 +72,18 @@ const HeaderMenu = (props: Props) => {
function authItems() { function authItems() {
return ( return (
<nav> <ul className={menuClasses}>
<div className="MenuGroup"> <div className="MenuGroup">
<li className="MenuItem profile"> <li className="MenuItem profile">
<Link href={`/${accountData.username}` || ''} passHref> <Link href={`/${data?.account.username}` || ''} passHref>
<div> <div>
<span>{accountData.username}</span> <span>{data?.account.username}</span>
<img <img
alt={userData.picture} alt={data?.user.picture}
className={`profile ${accountState.account.user?.element}`} className={`profile ${data?.user.element}`}
srcSet={`/profile/${accountState.account.user?.picture}.png, srcSet={`/profile/${data?.user.picture}.png,
/profile/${userData.picture}@2x.png 2x`} /profile/${data?.user.picture}@2x.png 2x`}
src={`/profile/${userData.picture}.png`} src={`/profile/${data?.user.picture}.png`}
/> />
</div> </div>
</Link> </Link>
@ -98,7 +98,6 @@ const HeaderMenu = (props: Props) => {
</li> </li>
<li className="MenuItem disabled"> <li className="MenuItem disabled">
<ul className={menuClasses}>
<div> <div>
<span>{t('menu.guides')}</span> <span>{t('menu.guides')}</span>
<i className="tag">{t('coming_soon')}</i> <i className="tag">{t('coming_soon')}</i>
@ -112,18 +111,17 @@ const HeaderMenu = (props: Props) => {
</div> </div>
<div className="MenuGroup"> <div className="MenuGroup">
<AccountModal <AccountModal
username={accountState.account.user?.username} username={data?.account.username}
picture={accountState.account.user?.picture} picture={data?.user.picture}
gender={accountState.account.user?.gender} gender={data?.user.gender}
language={accountState.account.user?.language} language={data?.user.language}
theme={accountState.account.user?.theme} theme={data?.user.theme}
/> />
<li className="MenuItem" onClick={props.logout}> <li className="MenuItem" onClick={props.logout}>
<span>{t('menu.logout')}</span> <span>{t('menu.logout')}</span>
</li> </li>
</div> </div>
</ul> </ul>
</nav>
) )
} }
@ -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 export default HeaderMenu