Merge pull request 'feat: add active state to SidebarMenuButton based on current URL' (#13) from feat/active-state-sidebar into dev

Reviewed-on: #13

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>