major changes

state management now handled with redux
responsiveness uses custom hook (hooks.ts)

frontend/src/components/Navigation.tsx

@@ -0,0 +1,163 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { useMediaQuery } from '../hooks';
+import {
+  toggleApiKeyModal,
+  selectIsMenuOpen,
+  toggleIsMenuOpen,
+} from '../store';
+import Arrow1 from '../imgs/arrow.svg';
+import Hamburger from '../imgs/hamburger.svg';
+import Key from '../imgs/key.svg';
+import Info from '../imgs/info.svg';
+import Link from '../imgs/link.svg';
+import Exit from '../imgs/exit.svg';
+
+//TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
+//TODO - Need to add Discord and Github links
+
+function MobileNavigation({}) {
+  const dispatch = useDispatch();
+  const isMenuOpen = useSelector(selectIsMenuOpen);
+
+  return (
+    <div
+      className={`${
+        isMenuOpen ? 'border-b-2 border-gray-100' : 'h-16'
+      } fixed flex w-full flex-col bg-gray-50 transition-all`}
+    >
+      <div className="h-16 w-full border-b-2 border-gray-100">
+        {isMenuOpen ? (
+          <>
+            <button
+              className="mt-5 ml-6 h-6 w-6"
+              onClick={() => dispatch(toggleIsMenuOpen())}
+            >
+              <img src={Exit} alt="menu toggle" className="w-5" />
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="mt-5 ml-6 h-6 w-6"
+              onClick={() => dispatch(toggleIsMenuOpen())}
+            >
+              <img src={Hamburger} alt="menu toggle" className="w-7" />
+            </button>
+          </>
+        )}
+      </div>
+      {isMenuOpen && (
+        <nav className="my-4 flex flex-col">
+          <NavLink
+            to="/"
+            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100"
+          >
+            <img src={Info} alt="info" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Chat</p>
+          </NavLink>
+          <NavLink
+            to="/about"
+            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 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="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100">
+            <img src={Link} alt="info" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Discord</p>
+          </div>
+          <div className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100">
+            <img src={Link} alt="info" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Github</p>
+          </div>
+          <div
+            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100"
+            onClick={() => dispatch(toggleApiKeyModal())}
+          >
+            <img src={Key} alt="info" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Reset Key</p>
+          </div>
+        </nav>
+      )}
+    </div>
+  );
+}
+
+function DesktopNavigation() {
+  const dispatch = useDispatch();
+  const isMenuOpen = useSelector(selectIsMenuOpen);
+
+  return (
+    <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={() => dispatch(toggleIsMenuOpen())}
+        >
+          <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={() => dispatch(toggleApiKeyModal())}
+            >
+              <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>
+  );
+}
+
+export default function Navigation() {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  if (isMobile) {
+    return <MobileNavigation />;
+  } else {
+    return <DesktopNavigation />;
+  }
+}