hyl.st / mast
this repo has no description
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: click outside sidebar to close for desktop view

Anish Lakhwara 0fb6137c d51d2d61

+31 -2
+31 -2
mast-react-vite/src/components/ui/sidebar.tsx
··· 186 186 }, 187 187 ref, 188 188 ) => { 189 - const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); 189 + const { isMobile, state, open, setOpen, openMobile, setOpenMobile } = useSidebar(); 190 190 191 191 if (collapsible === "none") { 192 192 return ( ··· 227 227 ); 228 228 } 229 229 230 + // Create a ref for the desktop sidebar to detect clicks outside 231 + const sidebarRef = React.useRef<HTMLDivElement>(null); 232 + 233 + // Add click outside handler for desktop view 234 + React.useEffect(() => { 235 + if (isMobile || !open) return; // Only apply this for desktop when sidebar is open 236 + 237 + const handleClickOutside = (event: MouseEvent) => { 238 + // Check if the click was outside the sidebar and not on the sidebar trigger 239 + if ( 240 + sidebarRef.current && 241 + !sidebarRef.current.contains(event.target as Node) && 242 + !(event.target as Element).closest('[data-sidebar="trigger"]') 243 + ) { 244 + setOpen(false); 245 + } 246 + }; 247 + 248 + document.addEventListener('mousedown', handleClickOutside); 249 + return () => { 250 + document.removeEventListener('mousedown', handleClickOutside); 251 + }; 252 + }, [isMobile, open, setOpen]); 253 + 230 254 return ( 231 255 <div 232 - ref={ref} 256 + ref={(element) => { 257 + // Merge refs: the one passed in props and our local ref 258 + if (typeof ref === 'function') ref(element); 259 + else if (ref) ref.current = element; 260 + sidebarRef.current = element; 261 + }} 233 262 className="group peer hidden text-sidebar-foreground md:block" 234 263 data-state={state} 235 264 data-collapsible={state === "collapsed" ? collapsible : ""}