feat: enhance mobile experience by closing sidebar on link click

This commit is contained in:
Yoga Pangestu 2026-08-15 15:28:24 +07:00
parent 7371a9e517
commit 00ff74bab6

View File

@ -111,6 +111,7 @@ const sistemItems: NavMenuItem[] = [
function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) { function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) {
const { isCurrentUrl } = useCurrentUrl(); const { isCurrentUrl } = useCurrentUrl();
const { can, canAny } = useCan(); const { can, canAny } = useCan();
const { isMobile, setOpenMobile } = useSidebar();
const filtered = items.filter((item) => { const filtered = items.filter((item) => {
if (!item.permission) { if (!item.permission) {
@ -139,7 +140,7 @@ function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) {
isActive={isCurrentUrl(item.href)} isActive={isCurrentUrl(item.href)}
tooltip={{ children: item.title }} tooltip={{ children: item.title }}
> >
<Link href={item.href} prefetch> <Link href={item.href} prefetch onClick={() => isMobile && setOpenMobile(false)}>
<item.icon /> <item.icon />
<span>{item.title}</span> <span>{item.title}</span>
</Link> </Link>
@ -174,7 +175,7 @@ export function AppSidebar() {
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton size="lg" asChild> <SidebarMenuButton size="lg" asChild>
<Link href={dashboard.url()} prefetch> <Link href={dashboard.url()} prefetch onClick={() => isMobile && setOpenMobile(false)}>
<AppLogo /> <AppLogo />
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
@ -191,7 +192,7 @@ export function AppSidebar() {
isActive={isCurrentUrl(dasborItem.href)} isActive={isCurrentUrl(dasborItem.href)}
tooltip={{ children: dasborItem.title }} tooltip={{ children: dasborItem.title }}
> >
<Link href={dasborItem.href} prefetch> <Link href={dasborItem.href} prefetch onClick={() => isMobile && setOpenMobile(false)}>
<dasborItem.icon /> <dasborItem.icon />
<span>{dasborItem.title}</span> <span>{dasborItem.title}</span>
</Link> </Link>
@ -209,7 +210,7 @@ export function AppSidebar() {
isActive={isCurrentUrl(analisaItem.href)} isActive={isCurrentUrl(analisaItem.href)}
tooltip={{ children: analisaItem.title }} tooltip={{ children: analisaItem.title }}
> >
<Link href={analisaItem.href} prefetch> <Link href={analisaItem.href} prefetch onClick={() => isMobile && setOpenMobile(false)}>
<analisaItem.icon /> <analisaItem.icon />
<span>{analisaItem.title}</span> <span>{analisaItem.title}</span>
</Link> </Link>