|
|
@ -24,17 +24,26 @@ export default function Navigation({
|
|
|
|
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
|
|
|
|
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
|
|
|
|
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
|
|
|
|
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
|
|
|
|
);
|
|
|
|
);
|
|
|
|
const openNav = (
|
|
|
|
return (
|
|
|
|
<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={`${
|
|
|
|
|
|
|
|
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'}>
|
|
|
|
<div className={'h-16 w-full border-b-2 border-gray-100'}>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
onClick={() => setNavState('INACTIVE')}
|
|
|
|
onClick={() =>
|
|
|
|
|
|
|
|
setNavState(navState === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')
|
|
|
|
|
|
|
|
}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
<img
|
|
|
|
src={Arrow1}
|
|
|
|
src={Arrow1}
|
|
|
|
alt="menu toggle"
|
|
|
|
alt="menu toggle"
|
|
|
|
className={'m-auto w-3 rotate-0 transition-all'}
|
|
|
|
className={`${
|
|
|
|
|
|
|
|
navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
|
|
|
|
|
|
|
|
} m-auto w-3 transition-all duration-200`}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -72,36 +81,12 @@ export default function Navigation({
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const closedNav = (
|
|
|
|
|
|
|
|
<>
|
|
|
|
|
|
|
|
<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'}>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
|
|
|
|
onClick={() => setNavState('ACTIVE')}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src={Arrow1}
|
|
|
|
|
|
|
|
alt="menu toggle"
|
|
|
|
|
|
|
|
className={'m-auto w-3 rotate-180 transition-all'}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
|
|
|
|
className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
|
|
|
|
onClick={() => setNavState('ACTIVE')}
|
|
|
|
onClick={() => setNavState('ACTIVE')}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img src={Hamburger} alt="menu toggle" className="w-7" />
|
|
|
|
<img src={Hamburger} alt="menu toggle" className="w-7" />
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<>
|
|
|
|
|
|
|
|
{navState === 'ACTIVE' ? openNav : closedNav}
|
|
|
|
|
|
|
|
<APIKeyModal
|
|
|
|
<APIKeyModal
|
|
|
|
modalState={apiKeyModalState}
|
|
|
|
modalState={apiKeyModalState}
|
|
|
|
setModalState={setApiKeyModalState}
|
|
|
|
setModalState={setApiKeyModalState}
|
|
|
|