fix(ui): use dedicated sidebar open/close icons for better visual feedback of actions (#2088)

* fix(ui): use dedicated icons for sidebar toggle (panel-left-open/close)

* fix: update sidebar toggle icon colors

frontend/src/Navigation.tsx

@@ -9,7 +9,8 @@ import userService from './api/services/userService';
 import Add from './assets/add.svg';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Discord from './assets/discord.svg';
-import Expand from './assets/expand.svg';
+import PanelLeftClose from './assets/panel-left-close.svg';
+import PanelLeftOpen from './assets/panel-left-open.svg';
 import Github from './assets/git_nav.svg';
 import Hamburger from './assets/hamburger.svg';
 import openNewChat from './assets/openNewChat.svg';
@@ -302,18 +303,20 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       {
         <div className="absolute top-3 left-3 z-20 hidden transition-all duration-300 ease-in-out lg:block">
           <div className="flex items-center gap-3">
-            <button
+            {!navOpen && (
-              onClick={() => {
+              <button
-                setNavOpen(!navOpen);
+                onClick={() => {
-              }}
+                  setNavOpen(!navOpen);
-              className="transition-transform duration-200 hover:scale-110"
+                }}
-            >
+                className="transition-transform duration-200 hover:scale-110"
-              <img
+              >
-                src={Expand}
+                <img
-                alt="Toggle navigation menu"
+                  src={PanelLeftOpen}
-                className="m-auto transition-all duration-300 ease-in-out"
+                  alt="Open navigation menu"
-              />
+                  className="m-auto transition-all duration-300 ease-in-out"
-            </button>
+                />
+              </button>
+            )}
             {queries?.length > 0 && (
               <button
                 onClick={() => {
@@ -363,8 +366,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }}
           >
             <img
-              src={Expand}
+              src={navOpen ? PanelLeftClose : PanelLeftOpen}
-              alt="Toggle navigation menu"
+              alt={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
               className="m-auto transition-all duration-300 ease-in-out hover:scale-110"
             />
           </button>

frontend/src/assets/expand.svg

@@ -1,4 +0,0 @@
-<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.03371 5.27275L4.1915 20.9162C4.20021 21.7802 4.90766 22.4735 5.77162 22.4648L21.4151 22.307C22.2791 22.2983 22.9724 21.5909 22.9637 20.7269L22.8059 5.0834C22.7972 4.21944 22.0897 3.52612 21.2258 3.53483L5.58228 3.69262C4.71831 3.70134 4.02499 4.40878 4.03371 5.27275Z" stroke="#949494" stroke-width="2.08591" stroke-linejoin="round"/>
-<path d="M9.42289 22.428L9.23354 3.65585M17.6924 15.0436L15.5856 12.9788L17.6504 10.872M6.29419 22.4596L12.5516 22.3965M6.10484 3.68741L12.3622 3.62429" stroke="#949494" stroke-width="2.08591" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

frontend/src/assets/panel-left-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-close-icon lucide-panel-left-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>

frontend/src/assets/panel-left-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-open-icon lucide-panel-left-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m14 9 3 3-3 3"/></svg>