|
|
|
@ -24,71 +24,62 @@ export default function Navigation({
|
|
|
|
|
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
|
|
|
|
|
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
|
|
|
|
|
);
|
|
|
|
|
const openNav = (
|
|
|
|
|
<div className="fixed z-10 h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
|
|
|
|
|
<div className={'h-16 w-full border-b-2 border-gray-100'}>
|
|
|
|
|
<button
|
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
|
onClick={() => setNavState('INACTIVE')}
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src={Arrow1}
|
|
|
|
|
alt="menu toggle"
|
|
|
|
|
className={'m-auto w-3 rotate-0 transition-all'}
|
|
|
|
|
/>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex-grow border-b-2 border-gray-100"></div>
|
|
|
|
|
|
|
|
|
|
<div className="flex h-16 flex-col border-b-2 border-gray-100">
|
|
|
|
|
<div
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setApiKeyModalState('ACTIVE');
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<img src={Key} alt="key" className="ml-2 w-6" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Reset Key</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex h-48 flex-col border-b-2 border-gray-100">
|
|
|
|
|
<NavLink
|
|
|
|
|
to="/about"
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
>
|
|
|
|
|
<img src={Info} alt="info" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">About</p>
|
|
|
|
|
</NavLink>
|
|
|
|
|
|
|
|
|
|
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
|
|
|
|
<img src={Link} alt="link" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Discord</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
|
|
|
|
<img src={Link} alt="link" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Github</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const closedNav = (
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className="fixed z-10 hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
|
|
|
|
|
<div className={'h-16 w-16 border-b-2 border-gray-100'}>
|
|
|
|
|
<div
|
|
|
|
|
className={`${
|
|
|
|
|
navState === 'INACTIVE' && '-ml-96 md:-ml-60 lg:-ml-80'
|
|
|
|
|
} fixed z-10 flex h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all duration-200 lg:w-96`}
|
|
|
|
|
>
|
|
|
|
|
<div className={'h-16 w-full border-b-2 border-gray-100'}>
|
|
|
|
|
<button
|
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
|
onClick={() => setNavState('ACTIVE')}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
setNavState(navState === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src={Arrow1}
|
|
|
|
|
alt="menu toggle"
|
|
|
|
|
className={'m-auto w-3 rotate-180 transition-all'}
|
|
|
|
|
className={`${
|
|
|
|
|
navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
|
|
|
|
|
} m-auto w-3 transition-all duration-200`}
|
|
|
|
|
/>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex-grow border-b-2 border-gray-100"></div>
|
|
|
|
|
|
|
|
|
|
<div className="flex h-16 flex-col border-b-2 border-gray-100">
|
|
|
|
|
<div
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setApiKeyModalState('ACTIVE');
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<img src={Key} alt="key" className="ml-2 w-6" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Reset Key</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex h-48 flex-col border-b-2 border-gray-100">
|
|
|
|
|
<NavLink
|
|
|
|
|
to="/about"
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
>
|
|
|
|
|
<img src={Info} alt="info" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">About</p>
|
|
|
|
|
</NavLink>
|
|
|
|
|
|
|
|
|
|
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
|
|
|
|
<img src={Link} alt="link" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Discord</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
|
|
|
|
<img src={Link} alt="link" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Github</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button
|
|
|
|
|
className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
|
|
|
|
@ -96,12 +87,6 @@ export default function Navigation({
|
|
|
|
|
>
|
|
|
|
|
<img src={Hamburger} alt="menu toggle" className="w-7" />
|
|
|
|
|
</button>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{navState === 'ACTIVE' ? openNav : closedNav}
|
|
|
|
|
<APIKeyModal
|
|
|
|
|
modalState={apiKeyModalState}
|
|
|
|
|
setModalState={setApiKeyModalState}
|
|
|
|
|