Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-03 23:15:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #99 from ajaythapliyal/feature/restore-transition

Browse Source
This commit is contained in:
Alex 2023-02-18 18:14:15 +00:00 committed by GitHub
commit 8d408c59d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -9,13 +9,13 @@ export default function App() {
const [navState, setNavState] = useState<ActiveState>('ACTIVE');
return (
<div className="min-h-full min-w-full transition-all">
<div className="min-h-full min-w-full">
<Navigation
navState={navState}
setNavState={(val: ActiveState) => setNavState(val)}
/>
<div
className={`${
className={`transition-all duration-200 ${
navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-96' : ' ml-0 md:ml-16'
}`}
>

107
frontend/src/Navigation.tsx
View File

@ -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}