feat: integrate sidebar functionality for mobile responsiveness

resources/js/components/app-sidebar.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import AppLogo from '@/components/app-logo';
 import {
     Sidebar,
@@ -8,6 +9,7 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    useSidebar,
 } from '@/components/ui/sidebar';
 import { useCurrentUrl } from '@/hooks/use-current-url';
 import { dashboard } from '@/routes';
@@ -23,7 +25,7 @@ import { index as customersIndex } from '@/routes/admin/master/customers';
 import { index as productsIndex } from '@/routes/admin/master/products';
 import { index as suppliersIndex } from '@/routes/admin/master/suppliers';
 import { index as rolesIndex } from '@/routes/admin/settings/roles';
-import { Link } from '@inertiajs/react';
+import { Link, router } from '@inertiajs/react';
 import type { LucideIcon } from 'lucide-react';
 import {
     Activity,
@@ -119,6 +121,17 @@ function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) {
 
 export function AppSidebar() {
     const { isCurrentUrl } = useCurrentUrl();
+    const { isMobile, setOpenMobile } = useSidebar();
+
+    React.useEffect(() => {
+        if (!isMobile) return;
+
+        const cleanup = router.on('finish', () => {
+            setOpenMobile(false);
+        });
+
+        return cleanup;
+    }, [isMobile, setOpenMobile]);
 
     return (
         <Sidebar collapsible="icon" variant="inset">