itm/itmpwk.ac.id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add active state to SidebarMenuButton based on current URL #13

Merged
pangestu merged 1 commits from feat/active-state-sidebar into dev 2026-08-05 14:57:21 +08:00
Conversation 0 Commits 1 Files Changed 1 +5 -3
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/nav-main.tsx
View File

@ -1,5 +1,6 @@
"use client" "use client"
import { usePage } from "@inertiajs/react"
import { import {
SidebarGroup, SidebarGroup,
SidebarGroupLabel, SidebarGroupLabel,
@ -24,10 +25,11 @@ export function NavMain({
}: { }: {
items: (NavGroup | NavItem)[] items: (NavGroup | NavItem)[]
}) { }) {
const { url } = usePage()
return ( return (
<> <>
{items.map((item, index) => { {items.map((item) => {
if ("label" in item) { if ("label" in item) {
return ( return (
<SidebarGroup key={item.label} className="group-data-[collapsible=icon]:hidden"> <SidebarGroup key={item.label} className="group-data-[collapsible=icon]:hidden">
@ -35,7 +37,7 @@ export function NavMain({
<SidebarMenu> <SidebarMenu>
{item.items.map((child) => ( {item.items.map((child) => (
<SidebarMenuItem key={child.name}> <SidebarMenuItem key={child.name}>
<SidebarMenuButton asChild> <SidebarMenuButton asChild isActive={url === child.url}>
<a href={child.url}> <a href={child.url}>
<child.icon className="h-4 w-4" /> <child.icon className="h-4 w-4" />
<span>{child.name}</span> <span>{child.name}</span>
@ -52,7 +54,7 @@ export function NavMain({
<SidebarGroup key={item.name} className="group-data-[collapsible=icon]:hidden"> <SidebarGroup key={item.name} className="group-data-[collapsible=icon]:hidden">
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton asChild isActive={url === item.url}>
<a href={item.url}> <a href={item.url}>
<item.icon className="h-4 w-4" /> <item.icon className="h-4 w-4" />
<span>{item.name}</span> <span>{item.name}</span>