mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
style(Sidebar) added ToolTip (#1038)
* added open and close sidebard ToolTip * fix position * fix(Nav) removed empty brackets
This commit is contained in:
Marco Beretta
GitHub
parent
495ac1b36d
commit
f63fe4b4e0
3 changed files with 88 additions and 68 deletions
|
|
@ -22,6 +22,8 @@ import {
|
||||||
import { cn } from '~/utils/';
|
import { cn } from '~/utils/';
|
||||||
import store from '~/store';
|
import store from '~/store';
|
||||||
|
|
||||||
|
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
|
||||||
|
|
||||||
export default function Nav({ navVisible, setNavVisible }) {
|
export default function Nav({ navVisible, setNavVisible }) {
|
||||||
const [isHovering, setIsHovering] = useState(false);
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
const [navWidth, setNavWidth] = useState('260px');
|
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';
|
: 'flex flex-col gap-2 text-gray-100 text-sm';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<TooltipProvider delayDuration={300}>
|
||||||
<div
|
<Tooltip>
|
||||||
className="nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-900 md:max-w-[260px]"
|
<div
|
||||||
style={{
|
className={
|
||||||
width: navVisible ? navWidth : '0px',
|
'nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-900 md:max-w-[260px]'
|
||||||
visibility: navVisible ? 'visible' : 'hidden',
|
}
|
||||||
transition: 'width 0.2s, visibility 0.2s',
|
style={{
|
||||||
}}
|
width: navVisible ? navWidth : '0px',
|
||||||
>
|
visibility: navVisible ? 'visible' : 'hidden',
|
||||||
<div className="h-full w-[320px] md:w-[260px]">
|
transition: 'width 0.2s, visibility 0.2s',
|
||||||
<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="h-full w-[320px] md:w-[260px]">
|
||||||
<div className="mb-1 flex h-11 flex-row">
|
<div className="flex h-full min-h-0 flex-col">
|
||||||
<NewChat />
|
<div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
|
||||||
<button
|
<nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
|
||||||
type="button"
|
<div className="mb-1 flex h-11 flex-row">
|
||||||
className={cn(
|
<NewChat />
|
||||||
'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',
|
<TooltipTrigger asChild>
|
||||||
)}
|
<button
|
||||||
onClick={toggleNavVisible}
|
type="button"
|
||||||
>
|
className={cn(
|
||||||
<span className="sr-only">{localize('com_nav_close_sidebar')}</span>
|
'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',
|
||||||
<Panel open={false} />
|
)}
|
||||||
</button>
|
onClick={toggleNavVisible}
|
||||||
</div>
|
>
|
||||||
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
|
<span className="sr-only">{localize('com_nav_close_sidebar')}</span>
|
||||||
<div
|
<Panel open={false} />
|
||||||
className={`flex-1 flex-col overflow-y-auto ${
|
</button>
|
||||||
isHovering ? '' : 'scrollbar-transparent'
|
</TooltipTrigger>
|
||||||
} border-b border-white/20`}
|
<TooltipContent side="right" sideOffset={17}>
|
||||||
onMouseEnter={() => setIsHovering(true)}
|
{localize('com_nav_close_menu')}
|
||||||
onMouseLeave={() => setIsHovering(false)}
|
</TooltipContent>
|
||||||
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>
|
||||||
</div>
|
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
|
||||||
<NavLinks />
|
<div
|
||||||
</nav>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{!navVisible && (
|
||||||
{!navVisible && (
|
<div className="absolute left-2 top-2 z-10 hidden md:inline-block">
|
||||||
<div className="absolute left-2 top-2 z-10 hidden md:inline-block">
|
<TooltipTrigger asChild>
|
||||||
<button
|
<button
|
||||||
type="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"
|
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}
|
onClick={toggleNavVisible}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<span className="sr-only">{localize('com_nav_open_sidebar')}</span>
|
<span className="sr-only">{localize('com_nav_open_sidebar')}</span>
|
||||||
<Panel open={true} />
|
<Panel open={true} />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -226,6 +226,8 @@ export default {
|
||||||
com_endpoint_config_key_google_service_account: 'Create a Service Account',
|
com_endpoint_config_key_google_service_account: 'Create a Service Account',
|
||||||
com_endpoint_config_key_google_vertex_api_role:
|
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.',
|
'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: 'Filename',
|
||||||
com_nav_export_filename_placeholder: 'Set the filename',
|
com_nav_export_filename_placeholder: 'Set the filename',
|
||||||
com_nav_export_type: 'Type',
|
com_nav_export_type: 'Type',
|
||||||
|
|
|
||||||
|
|
@ -226,6 +226,8 @@ export default {
|
||||||
com_endpoint_config_key_google_service_account: 'Crea un account di servizio',
|
com_endpoint_config_key_google_service_account: 'Crea un account di servizio',
|
||||||
com_endpoint_config_key_google_vertex_api_role:
|
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.',
|
'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: 'Nome del file',
|
||||||
com_nav_export_filename_placeholder: 'Imposta il nome del file',
|
com_nav_export_filename_placeholder: 'Imposta il nome del file',
|
||||||
com_nav_export_type: 'Tipo',
|
com_nav_export_type: 'Tipo',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue