fix: navbar bug

This commit is contained in:
원더 2021-02-12 09:57:20 +09:00
parent 12ea06b57d
commit 3cdb5c31a7

View File

@ -76,11 +76,38 @@ const Navbar = ({ theme, setTheme }:NavbarProps): JSX.Element => {
<li className='flex items-center outline-none' onFocus={() => setDropdownOpen(true)} onMouseOver={() => setDropdownOpen(true)} onMouseOut={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}> <li className='flex items-center outline-none' onFocus={() => setDropdownOpen(true)} onMouseOver={() => setDropdownOpen(true)} onMouseOut={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}>
{ {
userCache?.id && userCache.version === 2 ? userCache?.id && userCache.version === 2 ?
<a <>
className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer'> <a
<DiscordAvatar userID={userCache.id} className='w-8 h-8 rounded-full mr-1.5' size={128}/> className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer'>
{userCache.username} <i className='ml-2 fas fa-sort-down' /> <DiscordAvatar userID={userCache.id} className='w-8 h-8 rounded-full mr-1.5' size={128}/>
</a> : {userCache.username} <i className='ml-2 fas fa-sort-down' />
</a>
<div className={`rounded shadow-md absolute mt-14 top-0 w-48 bg-white text-black dark:bg-very-black dark:text-gray-300 text-sm ${dropdownOpen ? 'block' : 'hidden'}`}>
<ul className='relative'>
<li>
<Link href={`/users/${userCache.id}`}>
<a className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-t'><i className='fas fa-user' /> </a>
</Link>
</li>
<li>
<Link href='/panel'>
<a className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover'><i className='fas fa-cogs' /> </a>
</Link>
</li>
{/* <li><hr className='border-t mx-2'/></li> */}
<li>
<a onKeyPress={() => {
localStorage.removeItem('userCache')
redirectTo(router, 'logout')
}
} onClick={() => {
localStorage.removeItem('userCache')
redirectTo(router, 'logout')
}} className='px-4 py-2 block text-red-500 hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-b cursor-pointer'><i className='fas fa-sign-out-alt' /> </a>
</li>
</ul>
</div>
</> :
<a tabIndex={0} onKeyPress={()=> { <a tabIndex={0} onKeyPress={()=> {
if(!userCache) { if(!userCache) {
localStorage.redirectTo = window.location.href localStorage.redirectTo = window.location.href
@ -93,36 +120,10 @@ const Navbar = ({ theme, setTheme }:NavbarProps): JSX.Element => {
setNavbarOpen(false) setNavbarOpen(false)
redirectTo(router, 'login') redirectTo(router, 'login')
} }
}} className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer'> }} className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer outline-none'>
</a> </a>
} }
{ userCache ? <div className={`rounded shadow-md absolute mt-14 top-0 w-48 bg-white text-black dark:bg-very-black dark:text-gray-300 text-sm ${dropdownOpen ? 'block' : 'hidden'}`}>
<ul className='relative'>
<li>
<Link href={`/users/${userCache.id}`}>
<a className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-t'><i className='fas fa-user' /> </a>
</Link>
</li>
<li>
<Link href='/panel'>
<a className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover'><i className='fas fa-cogs' /> </a>
</Link>
</li>
{/* <li><hr className='border-t mx-2'/></li> */}
<li>
<a onKeyPress={() => {
localStorage.removeItem('userCache')
redirectTo(router, 'logout')
}
} onClick={() => {
localStorage.removeItem('userCache')
redirectTo(router, 'logout')
}} className='px-4 py-2 block text-red-500 hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-b cursor-pointer'><i className='fas fa-sign-out-alt' /> </a>
</li>
</ul>
</div> : ''}
</li> </li>
</ul> </ul>
</div> </div>
@ -179,7 +180,7 @@ const Navbar = ({ theme, setTheme }:NavbarProps): JSX.Element => {
<div className='my-10'> <div className='my-10'>
{ {
userCache?.id && userCache.version === 2? <> userCache?.id && userCache.version === 2 ? <>
<Link href={`/users/${userCache.id}`}> <Link href={`/users/${userCache.id}`}>
<a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> <a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
<i className='far fa-user' /> <i className='far fa-user' />