CollapseButton.tsx53 lines · main

1	import { useBreakpoint } from 'common'
2	import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
3	import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4
5	import { useAppStateSnapshot } from '@/state/app-state'
6
7	export function CollapseButton({ hideTabs }: { hideTabs: boolean }) {
8	const { showSidebar, setShowSidebar, mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
9	const isMobile = useBreakpoint('md')
10
11	const handleToggle = () => {
12	if (isMobile) {
13	setMobileMenuOpen(!mobileMenuOpen)
14	} else {
15	setShowSidebar(!showSidebar)
16	}
17	}
18
19	return (
20	<Tooltip>
21	<TooltipTrigger asChild>
22	<button
23	className={cn(
24	'hidden md:flex items-center justify-center w-10 h-(--header-height) hover:bg-surface-100 shrink-0',
25	!hideTabs && 'border-b border-b-default'
26	)}
27	onClick={handleToggle}
28	>
29	{showSidebar ? (
30	<>
31	<PanelLeftClose
32	size={16}
33	strokeWidth={1.5}
34	className="text-foreground-lighter hover:text-foreground-light"
35	/>
36	<span className="sr-only">Collapse sidebar</span>
37	</>
38	) : (
39	<>
40	<PanelLeftOpen
41	size={16}
42	strokeWidth={1.5}
43	className="text-foreground-lighter hover:text-foreground-light"
44	/>
45	<span className="sr-only">Expand sidebar</span>
46	</>
47	)}
48	</button>
49	</TooltipTrigger>
50	<TooltipContent side="bottom">{showSidebar ? 'Collapse' : 'Expand'} sidebar</TooltipContent>
51	</Tooltip>
52	)
53	}