From 56b81b78c30d07fcd9e132c846b3fdac5f194f44 Mon Sep 17 00:00:00 2001
From: Lakshmi Narayanan <ammulakshmi99@gmail.com>
Date: Sun, 29 Oct 2023 01:48:04 +0400
Subject: [PATCH] Update sidebar with new logo and icon

---
 frontend/src/Navigation.tsx | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index f3d810d7..5eb7e018 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -1,19 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-import Arrow1 from './assets/arrow.svg';
-import Arrow2 from './assets/dropdown-arrow.svg';
-import Exit from './assets/exit.svg';
-import Message from './assets/message.svg';
-import Hamburger from './assets/hamburger.svg';
-import Key from './assets/key.svg';
-import Info from './assets/info.svg';
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Documentation from './assets/documentation.svg';
 import Discord from './assets/discord.svg';
+import Arrow2 from './assets/dropdown-arrow.svg';
+import Expand from './assets/expand.svg';
+import Exit from './assets/exit.svg';
 import Github from './assets/github.svg';
+import Hamburger from './assets/hamburger.svg';
+import Info from './assets/info.svg';
+import Key from './assets/key.svg';
+import Message from './assets/message.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   selectApiKeyStatus,
   selectSelectedDocs,
@@ -178,11 +179,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }}
         >
           <img
-            src={Arrow1}
+            src={Expand}
             alt="menu toggle"
             className={`${
               !navOpen ? 'rotate-180' : 'rotate-0'
-            } m-auto w-3 transition-all duration-200`}
+            } m-auto transition-all duration-200`}
           />
         </button>
       )}
@@ -192,19 +193,25 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           !navOpen && '-ml-96 md:-ml-[18rem]'
         } duration-20 fixed top-0 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:h-12'}>
+        <div className={'visible flex h-16 w-full justify-between md:h-12'}>
+          <div className="my-auto mx-4 flex cursor-pointer gap-4">
+            <img src={DocsGPT3} alt="" />
+            <p className="my-auto text-2xl font-semibold">DocsGPT</p>
+          </div>
           <button
-            className="float-right mr-5 mt-5 h-5 w-5 md:mt-3"
+            className="float-right mr-5"
             onClick={() => {
               setNavOpen(!navOpen);
             }}
           >
             <img
-              src={Arrow1}
+              src={Expand}
               alt="menu toggle"
               className={`${
                 !navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto w-3 transition-all duration-200`}
+              } m-auto transition-all duration-200`}
+              width="25px"
+              height="25px"
             />
           </button>
         </div>
@@ -224,7 +231,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             } 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>
+          <img src={Message} className="ml-4 w-5" />
           <p className="my-auto text-sm text-eerie-black">New Chat</p>
         </NavLink>
         <div className="conversations-container max-h-[25rem] overflow-y-auto">