From f63fe4b4e0012eeb512dbee08158aba1d4ded89b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
Date: Wed, 11 Oct 2023 03:11:02 +0200
Subject: [PATCH] style(Sidebar) added ToolTip (#1038)

* added open and close sidebard ToolTip

* fix position

* fix(Nav) removed empty brackets
---
 client/src/components/Nav/Nav.tsx         | 152 ++++++++++++----------
 client/src/localization/languages/Eng.tsx |   2 +
 client/src/localization/languages/It.tsx  |   2 +
 3 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index c51273d89b..4bf54b583f 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/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,78 +163,92 @@ export default function Nav({ navVisible, setNavVisible }) {
       : 'flex flex-col gap-2 text-gray-100 text-sm';
 
   return (
-    <>
-      <div
-        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',
-          transition: 'width 0.2s, visibility 0.2s',
-        }}
-      >
-        <div className="h-full w-[320px] md:w-[260px]">
-          <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 />
-                  <button
-                    type="button"
-                    className={cn(
-                      'nav-close-button inline-flex h-11 w-11 items-center justify-center rounded-md border border-white/20 text-white hover:bg-gray-500/10',
-                    )}
-                    onClick={toggleNavVisible}
-                  >
-                    <span className="sr-only">{localize('com_nav_close_sidebar')}</span>
-                    <Panel open={false} />
-                  </button>
-                </div>
-                {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
-                <div
-                  className={`flex-1 flex-col overflow-y-auto ${
-                    isHovering ? '' : 'scrollbar-transparent'
-                  } border-b border-white/20`}
-                  onMouseEnter={() => setIsHovering(true)}
-                  onMouseLeave={() => setIsHovering(false)}
-                  ref={containerRef}
-                >
-                  <div className={containerClasses}>
-                    {(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
-                      <Spinner />
-                    ) : (
-                      <Conversations conversations={conversations} moveToTop={moveToTop} />
-                    )}
-                    <Pages
-                      pageNumber={pageNumber}
-                      pages={pages}
-                      nextPage={nextPage}
-                      previousPage={previousPage}
-                      setPageNumber={setPageNumber}
-                    />
+    <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]'
+          }
+          style={{
+            width: navVisible ? navWidth : '0px',
+            visibility: navVisible ? 'visible' : 'hidden',
+            transition: 'width 0.2s, visibility 0.2s',
+          }}
+        >
+          <div className="h-full w-[320px] md:w-[260px]">
+            <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(
+                          'nav-close-button inline-flex h-11 w-11 items-center justify-center rounded-md border border-white/20 text-white hover:bg-gray-500/10',
+                        )}
+                        onClick={toggleNavVisible}
+                      >
+                        <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>
-                </div>
-                <NavLinks />
-              </nav>
+                  {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
+                  <div
+                    className={`flex-1 flex-col overflow-y-auto ${
+                      isHovering ? '' : 'scrollbar-transparent'
+                    } border-b border-white/20`}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                    ref={containerRef}
+                  >
+                    <div className={containerClasses}>
+                      {(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
+                        <Spinner />
+                      ) : (
+                        <Conversations conversations={conversations} moveToTop={moveToTop} />
+                      )}
+                      <Pages
+                        pageNumber={pageNumber}
+                        pages={pages}
+                        nextPage={nextPage}
+                        previousPage={previousPage}
+                        setPageNumber={setPageNumber}
+                      />
+                    </div>
+                  </div>
+                  <NavLinks />
+                </nav>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      {!navVisible && (
-        <div className="absolute left-2 top-2 z-10 hidden md:inline-block">
-          <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"
-            onClick={toggleNavVisible}
-          >
-            <div className="flex items-center justify-center">
-              <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
-              <Panel open={true} />
-            </div>
-          </button>
-        </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"
+                onClick={toggleNavVisible}
+              >
+                <div className="flex items-center justify-center">
+                  <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
+                  <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>
   );
 }
diff --git a/client/src/localization/languages/Eng.tsx b/client/src/localization/languages/Eng.tsx
index 5051c73c64..d6a9158380 100644
--- a/client/src/localization/languages/Eng.tsx
+++ b/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',
diff --git a/client/src/localization/languages/It.tsx b/client/src/localization/languages/It.tsx
index 6f315f04f6..637faddda7 100644
--- a/client/src/localization/languages/It.tsx
+++ b/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',