mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 09:50:15 +01:00
4ef5ae6f71
* inital Tooltip implementation and test * style(tooltip): L/R sidePanel and Nav * style(tooltip): unarchive button; refactor: `useArchiveHandler` and `ArchiveButton` * style(tooltip): Delete button * refactor: remove unused className prop in DeleteButton component * style(tooltip): finish final tooltip and fix bookmark edit and delete button * refactor(ui): remove TooltipTest and DropDownMenu component and unused imports * style: update mobile UI * fix: sidePanel icon not showing * feat(AttachFile): add tooltip * fix(NavToggle): remove button without this button, kb users don't have to manually press 2 times to change the focus Also, tooltips with buttons focus don't trigger * fix: right side panel issue with double button * fix: merge issues * fix: sharedLink table issue * chore: update ariakit and framer-motion version * a11y: kb toggle for sidebar * feat: tooltip for some buttons
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { useLocalize, useLocalStorage } from '~/hooks';
|
|
import { TooltipAnchor } from '~/components/ui';
|
|
import { cn } from '~/utils';
|
|
|
|
export default function NavToggle({
|
|
onToggle,
|
|
navVisible,
|
|
isHovering,
|
|
setIsHovering,
|
|
side = 'left',
|
|
className = '',
|
|
translateX = true,
|
|
}) {
|
|
const localize = useLocalize();
|
|
const transition = {
|
|
transition: 'transform 0.3s ease, opacity 0.2s ease',
|
|
};
|
|
|
|
const rotationDegree = 15;
|
|
const rotation = isHovering || !navVisible ? `${rotationDegree}deg` : '0deg';
|
|
const topBarRotation = side === 'right' ? `-${rotation}` : rotation;
|
|
const bottomBarRotation = side === 'right' ? rotation : `-${rotation}`;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
className,
|
|
'-translate-y-1/2 transition-transform',
|
|
navVisible ? 'rotate-0' : 'rotate-180',
|
|
navVisible && translateX ? 'translate-x-[260px]' : 'translate-x-0 ',
|
|
)}
|
|
onMouseEnter={() => setIsHovering(true)}
|
|
onMouseLeave={() => setIsHovering(false)}
|
|
>
|
|
<TooltipAnchor
|
|
side={side === 'right' ? 'left' : 'right'}
|
|
aria-label={`toggle-${side === 'left' ? 'chat-history' : 'controls'}-nav`}
|
|
id={`toggle-${side}-nav`}
|
|
onClick={onToggle}
|
|
role="button"
|
|
description={
|
|
navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')
|
|
}
|
|
className="flex cursor-pointer items-center justify-center"
|
|
tabIndex={0}
|
|
>
|
|
<span className="" data-state="closed">
|
|
<div
|
|
className="flex h-[72px] w-8 items-center justify-center"
|
|
style={{ ...transition, opacity: isHovering ? 1 : 0.25 }}
|
|
>
|
|
<div className="flex h-6 w-6 flex-col items-center">
|
|
{/* Top bar */}
|
|
<div
|
|
className="h-3 w-1 rounded-full bg-black dark:bg-white"
|
|
style={{
|
|
...transition,
|
|
transform: `translateY(0.15rem) rotate(${topBarRotation}) translateZ(0px)`,
|
|
}}
|
|
/>
|
|
{/* Bottom bar */}
|
|
<div
|
|
className="h-3 w-1 rounded-full bg-black dark:bg-white"
|
|
style={{
|
|
...transition,
|
|
transform: `translateY(-0.15rem) rotate(${bottomBarRotation}) translateZ(0px)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</TooltipAnchor>
|
|
</div>
|
|
);
|
|
}
|