react-router-dom

frontend/src/components/Navigation/Navigation.tsx

@@ -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}
+      />
+    );
   }
 }

frontend/src/components/Navigation/PastChat.tsx

@@ -0,0 +1 @@
+export default function PastChat() {}

frontend/src/components/Navigation/imgs/info.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/components/Navigation/imgs/key.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.65 4C10.83 1.67 8.61 0 6 0C2.69 0 0 2.69 0 6C0 9.31 2.69 12 6 12C8.61 12 10.83 10.33 11.65 8H16V12H20V8H22V4H11.65ZM6 8C4.9 8 4 7.1 4 6C4 4.9 4.9 4 6 4C7.1 4 8 4.9 8 6C8 7.1 7.1 8 6 8Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/components/Navigation/imgs/link.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z" fill="black" fill-opacity="0.54"/>
+</svg>