mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
feat: mobile new menu ui
This commit is contained in:
원더
parent
f32571287d
commit
792cb0a152
@ -5,11 +5,11 @@ const Navbar = (): JSX.Element => {
|
||||
const [navbarOpen, setNavbarOpen] = useState<boolean>(false)
|
||||
return (
|
||||
<>
|
||||
<nav className="absolute bg-transparent z-50 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 bg-discord-blurple dark:bg-discord-black" style={{ background: 'transparent' }}>
|
||||
<nav className="fixed lg:absolute bg-transparent z-20 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 bg-discord-blurple dark:bg-discord-black">
|
||||
<div className="container flex flex-wrap items-center justify-between mx-auto px-4">
|
||||
<div className="relative flex justify-between w-full lg:static lg:block lg:justify-start lg:w-auto">
|
||||
<div className="relative flex justify-between w-full static block lg:justify-start lg:w-auto">
|
||||
<a
|
||||
className="logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-200 font-semibold leading-relaxed uppercase sm:text-2xl"
|
||||
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"
|
||||
href="/"
|
||||
>
|
||||
KOREANBOTS
|
||||
@ -23,44 +23,41 @@ const Navbar = (): JSX.Element => {
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none' +
|
||||
(navbarOpen ? ' block rounded shadow-lg' : ' hidden')
|
||||
}
|
||||
className='lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden'
|
||||
>
|
||||
<ul className="flex flex-col list-none lg:flex-row lg:ml-auto">
|
||||
<li className="flex items-center">
|
||||
<a
|
||||
href="/discord"
|
||||
className="lg:text-gray-100 lg:hover:text-gray-200 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"
|
||||
className="lg:text-gray-100 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"
|
||||
>
|
||||
디스코드
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Link href="/about">
|
||||
<a className="lg:text-gray-100 lg:hover:text-gray-200 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">
|
||||
<a className="lg:text-gray-100 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">
|
||||
소개
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Link href="/api">
|
||||
<a className="lg:text-gray-100 lg:hover:text-gray-200 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">
|
||||
<a className="lg:text-gray-100 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">
|
||||
API
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Link href="/addbot">
|
||||
<a className="lg:text-gray-100 lg:hover:text-gray-200 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">
|
||||
<a className="lg:text-gray-100 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">
|
||||
봇 추가하기
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Link href="/api/auth/discord">
|
||||
<a className="lg:text-gray-100 lg:hover:text-gray-200 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">
|
||||
<a className="lg:text-gray-100 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">
|
||||
로그인
|
||||
</a>
|
||||
</Link>
|
||||
@ -69,6 +66,56 @@ const Navbar = (): JSX.Element => {
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className={`w-full h-full fixed bg-discord-blurple dark:bg-discord-black mt-8 sm:mt-0 z-19 ${navbarOpen ? 'block' : 'hidden'}`}>
|
||||
<nav className="mt-20">
|
||||
<Link href='/about'>
|
||||
<a className="flex items-center py-2 px-8 text-gray-100 hover:text-gray-300">
|
||||
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<span className='px-2 font-medium'>소개</span>
|
||||
|
||||
</a>
|
||||
</Link>
|
||||
<Link href='/about'>
|
||||
<a className="flex items-center py-2 px-8 text-gray-100 hover:text-gray-300">
|
||||
<i className="fas fa-tools"/>
|
||||
|
||||
|
||||
<span className='px-2 font-medium'>API</span>
|
||||
|
||||
</a>
|
||||
</Link>
|
||||
<Link href='/addbot'>
|
||||
<a className="flex items-center py-2 px-8 text-gray-100 hover:text-gray-300">
|
||||
<i className="fas fa-plus"></i>
|
||||
<span className='px-2 font-medium'>봇 추가하기</span>
|
||||
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Link href='/api/auth/login'>
|
||||
<a className="flex items-center py-2 px-8 text-gray-100 hover:text-gray-300">
|
||||
<i className="far fa-user"/>
|
||||
<span className='px-2 font-medium'>로그인</span>
|
||||
|
||||
</a>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="absolute bottom-0 my-10">
|
||||
<a className="flex items-center py-2 px-8 text-gray-100 hover:text-gray-300">
|
||||
<i className='fab fa-discord' />
|
||||
|
||||
|
||||
<Link href='/discord'>
|
||||
<a className='px-2 font-medium'>디스코드 서버</a>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user