From 5dd6145d592c8b28bd6ca3a46ba4ed59adad9e06 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 5 Aug 2026 13:56:03 +0700
Subject: [PATCH] feat: add active state to SidebarMenuButton based on current
 URL

---
 resources/js/components/nav-main.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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