feat: integrate sidebar functionality for mobile responsiveness

This commit is contained in:
Yoga Pangestu 2026-08-01 02:23:52 +07:00
parent dc8ecf6c52
commit 16909d076b

View File

@ -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">