style(Sidebar) added ToolTip (#1038)

* added open and close sidebard ToolTip

* fix position

* fix(Nav) removed empty brackets

client/src/components/Nav/Nav.tsx

@@ -22,6 +22,8 @@ import {
 import { cn } from '~/utils/';
 import store from '~/store';
 
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
+
 export default function Nav({ navVisible, setNavVisible }) {
   const [isHovering, setIsHovering] = useState(false);
   const [navWidth, setNavWidth] = useState('260px');
@@ -161,9 +163,12 @@ export default function Nav({ navVisible, setNavVisible }) {
       : 'flex flex-col gap-2 text-gray-100 text-sm';
 
   return (
-    <>
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
         <div
-        className="nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-900 md:max-w-[260px]"
+          className={
+            'nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-900 md:max-w-[260px]'
+          }
           style={{
             width: navVisible ? navWidth : '0px',
             visibility: navVisible ? 'visible' : 'hidden',
@@ -171,11 +176,12 @@ export default function Nav({ navVisible, setNavVisible }) {
           }}
         >
           <div className="h-full w-[320px] md:w-[260px]">
-          <div className="flex h-full min-h-0 flex-col ">
+            <div className="flex h-full min-h-0 flex-col">
               <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
                 <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
                   <div className="mb-1 flex h-11 flex-row">
                     <NewChat />
+                    <TooltipTrigger asChild>
                       <button
                         type="button"
                         className={cn(
@@ -186,6 +192,10 @@ export default function Nav({ navVisible, setNavVisible }) {
                         <span className="sr-only">{localize('com_nav_close_sidebar')}</span>
                         <Panel open={false} />
                       </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right" sideOffset={17}>
+                      {localize('com_nav_close_menu')}
+                    </TooltipContent>
                   </div>
                   {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
                   <div
@@ -219,6 +229,7 @@ export default function Nav({ navVisible, setNavVisible }) {
         </div>
         {!navVisible && (
           <div className="absolute left-2 top-2 z-10 hidden md:inline-block">
+            <TooltipTrigger asChild>
               <button
                 type="button"
                 className="nav-open-button flex h-11 cursor-pointer items-center gap-3 rounded-md border border-black/10 bg-white p-3 text-sm text-black transition-colors duration-200 hover:bg-gray-50 dark:border-white/20 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
@@ -229,10 +240,15 @@ export default function Nav({ navVisible, setNavVisible }) {
                   <Panel open={true} />
                 </div>
               </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={17}>
+              {localize('com_nav_open_menu')}
+            </TooltipContent>
           </div>
         )}
 
-      <div className={'nav-mask' + (navVisible ? ' active' : '')} onClick={toggleNavVisible}></div>
+        <div className={`nav-mask${navVisible ? ' active' : ''}`} onClick={toggleNavVisible}></div>
-    </>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

client/src/localization/languages/Eng.tsx

@@ -226,6 +226,8 @@ export default {
   com_endpoint_config_key_google_service_account: 'Create a Service Account',
   com_endpoint_config_key_google_vertex_api_role:
     'Make sure to click \'Create and Continue\' to give at least the \'Vertex AI User\' role. Lastly, create a JSON key to import here.',
+  com_nav_close_menu: 'Close sidebar',
+  com_nav_open_menu: 'Open sidebar',
   com_nav_export_filename: 'Filename',
   com_nav_export_filename_placeholder: 'Set the filename',
   com_nav_export_type: 'Type',

client/src/localization/languages/It.tsx

@@ -226,6 +226,8 @@ export default {
   com_endpoint_config_key_google_service_account: 'Crea un account di servizio',
   com_endpoint_config_key_google_vertex_api_role:
     'Assicurati di fare clic su \'Crea e continua\' per dare almeno il ruolo \'Utente Vertex AI\'. Infine, crea una chiave JSON da importare qui.',
+  com_nav_close_menu: 'Apri la barra laterale',
+  com_nav_open_menu: 'Chiudi la barra laterale',
   com_nav_export_filename: 'Nome del file',
   com_nav_export_filename_placeholder: 'Imposta il nome del file',
   com_nav_export_type: 'Tipo',