chore: navbar for developers

This commit is contained in:
wonderlandpark 2021-03-08 20:13:36 +09:00
parent a05a30422a
commit cb957cc5a2
2 changed files with 6 additions and 7 deletions

View File

@ -13,7 +13,6 @@ const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout
<SEO title='한디리 개발자' description='한국 디스코드봇 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.' />
<div className='block lg:hidden h-screen relative'>
<div className='w-16 pt-20 px-2 h-full text-center bg-little-white dark:bg-discord-black fixed'>
<h2 className='font-black text-koreanbots-blue pb-4'><i className='fas fa-tools'/></h2>
<ul className='text-gray-600 dark:text-gray-300'>
<li className={`cursor-pointer py-2 px-4 mb-2 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
<Link href='/developers/applications'><i className='fas fa-robot'/></Link>
@ -26,7 +25,6 @@ const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout
</div>
<div className='hidden lg:block h-screen relative'>
<div className='bg-little-white dark:bg-discord-black pt-20 px-6 fixed h-full w-60'>
<h2 className='font-black text-2xl pb-4 text-koreanbots-blue'>DEVELOPERS</h2>
<ul className='text-base text-gray-600 dark:text-gray-300 mb-6'>
<Link href='/developers/applications'>
<li className={`cursor-pointer py-2 px-4 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>

View File

@ -22,15 +22,16 @@ const Navbar = (): JSX.Element => {
const [dropdownOpen, setDropdownOpen] = useState<boolean>(false)
const router = useRouter()
const logged = userCache?.id && userCache.version === 2
const dev = router.pathname.startsWith('/developers')
return (
<>
<nav className='fixed z-40 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 dark:bg-discord-black bg-discord-blurple bg-transparent lg:absolute'>
<div className='container flex flex-wrap items-center justify-between mx-auto px-4'>
<div className='relative flex justify-between w-full lg:justify-start lg:w-auto'>
<Link href='/'>
<a className='logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-300 font-semibold leading-relaxed uppercase sm:text-2xl'
<Link href={dev ? '/developers' : '/'}>
<a className={`${dev ? 'text-koreanbots-blue ' : ''}logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-300 font-semibold leading-relaxed uppercase sm:text-2xl`}
>
KOREANBOTS
{ dev ? <><i className='fas fa-tools mr-1'/> DEVELOPERS</> : 'KOREANBOTS'}
</a>
</Link>
<button
@ -42,9 +43,9 @@ const Navbar = (): JSX.Element => {
</button>
<ul className='hidden lg:flex flex-col list-none lg:flex-row lg:ml-auto'>
<li className='flex items-center'>
<Link href='/developers'>
<Link href={dev ? '/' : '/developers'}>
<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'>
{dev ? '홈' : '개발자'}
</a>
</Link>
</li>