Merge pull request #448 from SoumyadiptoPal/newBranch

Updated navigation bar and also added icons

frontend/src/Navigation.tsx

@@ -33,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);
 
@@ -147,15 +151,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);
             }}
@@ -182,7 +202,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>
@@ -298,7 +318,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');
             }}
@@ -312,7 +332,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' : ''
               }`
             }
@@ -325,31 +345,30 @@ 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>
           </a>
-          <div className="border-t-2">
-            <a
-              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"
-            >
-              <img src={Discord} alt="link" className="ml-2 w-5" />
-              <p className="my-auto text-eerie-black">Visit our Discord</p>
-            </a>
-            <a
-              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"
-            >
-              <img src={Github} alt="link" className="ml-2 w-5" />
-              <p className="my-auto text-eerie-black">Visit our GitHub</p>
-            </a>
-          </div>
+          <a
+            href="https://discord.gg/WHJdfbQDR4"
+            target="_blank"
+            rel="noreferrer"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+          >
+            <img src={Discord} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Visit our Discord</p>
+          </a>
+
+          <a
+            href="https://github.com/arc53/DocsGPT"
+            target="_blank"
+            rel="noreferrer"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+          >
+            <img src={Github} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Visit our Github</p>
+          </a>
         </div>
       </div>
       <div className="fixed h-16 w-full border-b-2 bg-gray-50 md:hidden">