File size: 2,763 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import { TooltipAnchor } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function NavToggle({
onToggle,
navVisible,
isHovering,
setIsHovering,
side = 'left',
className = '',
translateX = true,
}: {
onToggle: () => void;
navVisible: boolean;
isHovering: boolean;
setIsHovering: (isHovering: boolean) => void;
side?: 'left' | 'right';
className?: string;
translateX?: boolean;
}) {
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={side === 'left' ? localize('com_ui_chat_history') : localize('com_ui_controls')}
aria-expanded={navVisible}
aria-controls={side === 'left' ? 'chat-history-nav' : 'controls-nav'}
id={`toggle-${side}-nav`}
onClick={onToggle}
role="button"
description={
navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')
}
className="flex 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>
);
}
|