LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 01:23:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

react-router-dom

Browse Source
This commit is contained in:
TaylorS15
2023-02-11 11:56:44 -05:00
parent e25ac549d7
commit 1d3e5b85fc
12 changed files with 266 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/components/Navigation/Navigation.tsx
View File

@@ -1,26 +1,103 @@
import React, { useState } from 'react';
import Arrow1 from './imgs/arrow.svg';
import Key from './imgs/key.svg';
import Info from './imgs/info.svg';
import Link from './imgs/link.svg';
function MobileNavigation() {
return <div>Mobile Navigation</div>;
}
function DesktopNavigation() {
function DesktopNavigation({
isMenuOpen,
setIsMenuOpen,
setIsApiModalOpen,
}: {
isMenuOpen: boolean;
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) {
return (
<div className="fixed h-screen w-72 border-r-2 border-gray-100 bg-gray-50 lg:w-96">
<div className="h-16 border-b-2 border-gray-100">
<button className="float-right mr-4 mt-5 h-5 w-5">
<img src={Arrow1} alt="menu toggle" className="m-auto w-3" />
<div
className={`${
isMenuOpen ? 'w-72 lg:w-96' : 'w-16'
} fixed flex h-screen flex-col border-r-2 border-gray-100 bg-gray-50 transition-all`}
>
<div
className={`${
isMenuOpen ? 'w-full' : 'w-16'
} ml-auto h-16 border-b-2 border-gray-100`}
>
<button
className="float-right mr-5 mt-5 h-5 w-5"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<img
src={Arrow1}
alt="menu toggle"
className={`${
isMenuOpen ? 'rotate-0' : 'rotate-180'
} m-auto w-3 transition-all`}
/>
</button>
</div>
{isMenuOpen && (
<>
<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={() => setIsApiModalOpen(true)}
>
<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">
<div 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>
</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">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>
);
}
export default function Navigation({ isMobile }: { isMobile: boolean }) {
export default function Navigation({
isMobile,
isMenuOpen,
setIsMenuOpen,
setIsApiModalOpen,
}: {
isMobile: boolean;
isMenuOpen: boolean;
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) {
if (isMobile) {
return <MobileNavigation />;
} else {
return <DesktopNavigation />;
return (
<DesktopNavigation
isMenuOpen={isMenuOpen}
setIsMenuOpen={setIsMenuOpen}
setIsApiModalOpen={setIsApiModalOpen}
/>
);
}
}