Updating the active state for the main nav items

Author: tnylea

resources/js/components/nav-main.tsx

@@ -1,5 +1,5 @@
 import { type NavItemType } from '@/types'
-import { Link } from "@inertiajs/react"
+import { Link, usePage } from "@inertiajs/react"
 import {
     SidebarGroup,
     SidebarMenu,
@@ -10,12 +10,13 @@ import {
 export function NavMain({ items = [] }: { 
     items: NavItemType[] 
 }) {
+    const page = usePage();    
     return (
         <SidebarGroup>
             <SidebarMenu>
                 {items.map((item) => (
                     <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild isActive={item.isActive}>
+                        <SidebarMenuButton asChild isActive={item.url === page.url}>
                             <Link href={item.url} prefetch>
                                 <item.icon />
                                 <span>{item.title}</span>