About page, App fix, Mobile nav started

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Navigation from './components/Navigation/Navigation';
-import DocsGPT from './components/DocsGPT';
+import DocsGPT from './components/DocsGPT/DocsGPT';
 import APIKeyModal from './components/APIKeyModal';
 import About from './components/About';
 
@@ -17,6 +17,7 @@ export default function App() {
       setIsMobile(false);
     } else {
       setIsMobile(true);
+      setIsMenuOpen(false);
     }
   };
 
@@ -48,8 +49,14 @@ export default function App() {
         setIsApiModalOpen={setIsApiModalOpen}
       />
       <Routes>
-        <Route path="/" element={<DocsGPT isMenuOpen={isMenuOpen} />} />
-        <Route path="/about" element={<About isMenuOpen={isMenuOpen} />} />
+        <Route
+          path="/"
+          element={<DocsGPT isMenuOpen={isMenuOpen} isMobile={isMobile} />}
+        />
+        <Route
+          path="/about"
+          element={<About isMenuOpen={isMenuOpen} isMobile={isMobile} />}
+        />
       </Routes>
     </div>
   );

frontend/src/components/About.tsx

@@ -1,17 +1,29 @@
-export default function About({ isMenuOpen }: { isMenuOpen: boolean }) {
+export default function About({
+  isMenuOpen,
+  isMobile,
+}: {
+  isMenuOpen: boolean;
+  isMobile: boolean;
+}) {
   //TODO - Add hyperlinks to text
   //TODO - Styling
 
   return (
-    //Parent div for all content shown through App.tsx routing needs to have this styling.
+    //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
     <div
       className={`${
-        isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'
+        isMobile
+          ? isMenuOpen
+            ? 'mt-72'
+            : 'mt-16'
+          : isMenuOpen
+          ? 'md:ml-72 lg:ml-96'
+          : 'ml-16'
       } h-full w-full p-6 transition-all`}
     >
       <article className="mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
         <p className="text-3xl font-semibold">About DocsGPT 🦖</p>
-        <p className="mt-4 text-xl">
+        <p className="mt-4 text-xl font-bold">
           Find the information in your documentation through AI-powered
           open-source chatbot. Powered by GPT-3, Faiss and LangChain.
         </p>
@@ -23,7 +35,7 @@ export default function About({ isMenuOpen }: { isMenuOpen: boolean }) {
           </p>
           <p className="mt-4 text-lg">
             1. Navigate to{' '}
-            <span className="bg-gray-200 italic"> /application </span> folder
+            <span className="bg-gray-200 italic"> /application</span> folder
           </p>
           <p className="mt-4 text-lg">
             2. Install dependencies from{' '}

frontend/src/components/DocsGPT.tsx

@@ -1,7 +0,0 @@
-export default function DocsGPT({ isMenuOpen }: { isMenuOpen: boolean }) {
-  return (
-    <div className={`${isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'}`}>
-      Docs GPT Chat Placeholder
-    </div>
-  );
-}

frontend/src/components/DocsGPT/DocsGPT.tsx

@@ -0,0 +1,24 @@
+export default function DocsGPT({
+  isMenuOpen,
+  isMobile,
+}: {
+  isMenuOpen: boolean;
+  isMobile: boolean;
+}) {
+  return (
+    //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
+    <div
+      className={`${
+        isMobile
+          ? isMenuOpen
+            ? 'mt-72'
+            : 'mt-16'
+          : isMenuOpen
+          ? 'md:ml-72 lg:ml-96'
+          : 'ml-16'
+      } h-full w-full p-6 transition-all`}
+    >
+      Docs GPT Chat Placeholder
+    </div>
+  );
+}

frontend/src/components/Navigation/Navigation.tsx

@@ -1,12 +1,77 @@
 import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 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';
 
-function MobileNavigation() {
-  return <div>Mobile Navigation</div>;
+function MobileNavigation({
+  isMenuOpen,
+  setIsMenuOpen,
+  setIsApiModalOpen,
+}: {
+  isMenuOpen: boolean;
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  //TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
+  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={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              <img src={Exit} alt="menu toggle" className="w-5" />
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="mt-5 ml-6 h-6 w-6"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              <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>
+        </nav>
+      )}
+    </div>
+  );
 }
 
 function DesktopNavigation({
@@ -94,7 +159,13 @@ export default function Navigation({
   setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   if (isMobile) {
-    return <MobileNavigation />;
+    return (
+      <MobileNavigation
+        isMenuOpen={isMenuOpen}
+        setIsMenuOpen={setIsMenuOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+    );
   } else {
     return (
       <DesktopNavigation

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

@@ -0,0 +1,10 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_202_7)">
+<path d="M750 50L50 750M750 750L50 50" stroke="black" stroke-opacity="0.54" stroke-width="100" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_202_7">
+<rect width="800" height="800" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="600" height="450" viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 25H575M25 225H575M25 425H575" stroke="black" stroke-opacity="0.54" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>