From 792cb0a15286354d5c71e4cab8dcda005234ed5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Wed, 6 Jan 2021 13:23:53 +0900
Subject: [PATCH] feat: mobile new menu ui

---
 components/Navbar.tsx | 71 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 12 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6a1f1e8..a739b6b 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -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>
 		</>
 	)
 }