Updated navigation bar and also added discord and github icons

frontend/src/App.tsx

@@ -4,17 +4,24 @@ import Conversation from './conversation/Conversation';
 import About from './About';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
+import { useState } from 'react';
 
 inject();
 
 export default function App() {
   const { isMobile } = useMediaQuery();
+  const [navOpen, setNavOpen] = useState(!isMobile);
+
   return (
     <div className="min-h-full min-w-full">
-      <Navigation />
+      <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
         className={`transition-all duration-200 ${
-          !isMobile ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'
+          !isMobile
+            ? `ml-0 ${
+                !navOpen ? '-mt-5 md:mx-auto lg:mx-auto' : 'md:ml-72 lg:ml-60'
+              }`
+            : 'ml-0 md:ml-16'
         }`}
       >
         <Routes>

frontend/src/Navigation.tsx

@@ -8,6 +8,8 @@ import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
 import Info from './assets/info.svg';
 import Link from './assets/link.svg';
+import Discord from './assets/discord.svg';
+import Github from './assets/github.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
@@ -31,14 +33,18 @@ import Upload from './upload/Upload';
 import { Doc, getConversations } from './preferences/preferenceApi';
 import SelectDocsModal from './preferences/SelectDocsModal';
 
-export default function Navigation() {
+interface NavigationProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
   const conversationId = useSelector(selectConversationId);
   const { isMobile } = useMediaQuery();
-  const [navOpen, setNavOpen] = useState(!isMobile);
 
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
 
@@ -142,15 +148,31 @@ export default function Navigation() {
 
   return (
     <>
+      {!navOpen && (
+        <button
+          className="duration-25 absolute relative top-3 left-3 z-20 hidden transition-all md:block"
+          onClick={() => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <img
+            src={Arrow1}
+            alt="menu toggle"
+            className={`${
+              !navOpen ? 'rotate-180' : 'rotate-0'
+            } m-auto w-3 transition-all duration-200`}
+          />
+        </button>
+      )}
       <div
         ref={navRef}
         className={`${
-          !navOpen && '-ml-96 md:-ml-[14rem]'
+          !navOpen && '-ml-96 md:-ml-[18rem]'
         } duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
       >
-        <div className={'visible h-16 w-full border-b-2 md:hidden'}>
+        <div className={'visible h-16 w-full border-b-2 md:h-12'}>
           <button
-            className="float-right mr-5 mt-5 h-5 w-5"
+            className="float-right mr-5 mt-5 h-5 w-5 md:mt-3"
             onClick={() => {
               setNavOpen(!navOpen);
             }}
@@ -177,7 +199,7 @@ export default function Navigation() {
           className={({ isActive }) =>
             `${
               isActive && conversationId === null ? 'bg-gray-3000' : ''
-            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
+            } my-auto mx-4 mt-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
           }
         >
           <img src={Message} className="ml-4 w-5"></img>
@@ -291,7 +313,7 @@ export default function Navigation() {
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
             onClick={() => {
               setApiKeyModalState('ACTIVE');
             }}
@@ -305,7 +327,7 @@ export default function Navigation() {
           <NavLink
             to="/about"
             className={({ isActive }) =>
-              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
+              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
                 isActive ? 'bg-gray-3000' : ''
               }`
             }
@@ -318,7 +340,7 @@ export default function Navigation() {
             href="https://docs.docsgpt.co.uk/"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Link} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Documentation</p>
@@ -328,9 +350,9 @@ export default function Navigation() {
             href="https://discord.gg/WHJdfbQDR4"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
-            <img src={Link} alt="link" className="ml-2 w-5" />
+            <img src={Discord} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Discord</p>
           </a>
 
@@ -338,9 +360,9 @@ export default function Navigation() {
             href="https://github.com/arc53/DocsGPT"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
-            <img src={Link} alt="link" className="ml-2 w-5" />
+            <img src={Github} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Github</p>
           </a>
         </div>

frontend/src/assets/discord.svg

@@ -0,0 +1 @@
+<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="black" fill-opacity="0.54"/></svg>

frontend/src/assets/github.svg

@@ -0,0 +1,5 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>github</title>
+  <rect width="24" height="24" fill="none"/>
+  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
+</svg>