Active menu item follow react router state

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/components/AppSidebar.tsx

@@ -31,6 +31,7 @@ import {
 } from "@/components/ui/sidebar";
 import type { AppSidebarQuery as AppSidebarQueryType } from "./__generated__/AppSidebarQuery.graphql";
 import { TeamSwitcher } from "@/components/TeamSwitcher";
+import { url } from "inspector";
 const staticData = {
   user: {
     name: "shadcn",
@@ -46,7 +47,7 @@ const staticData = {
     {
       title: "Organizations",
       icon: Building,
-      isActive: true,
+      url: "/peoples",
       items: [
         {
           title: "Peoples",

apps/console/src/components/NavMain.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ChevronRight, type LucideIcon } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 
 import {
   Collapsible,
@@ -34,14 +34,41 @@ export function NavMain({
     }[];
   }[];
 }) {
+  const location = useLocation();
+
+  // Determine if an item is active based on the current route
+  const isItemActive = (item: { url?: string; items?: { url: string }[] }) => {
+    // If the item has a URL and it matches the current path
+    if (item.url && location.pathname.startsWith(item.url)) {
+      return true;
+    }
+
+    // If the item has sub-items, check if any of them match the current path
+    if (item.items?.length) {
+      return item.items.some((subItem) =>
+        location.pathname.startsWith(subItem.url)
+      );
+    }
+
+    return false;
+  };
+
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Compliance</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
+        {items.map((item) => {
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+          const active = isItemActive(item) || item.isActive;
+
+          return (
+            <Collapsible key={item.title} asChild defaultOpen={active}>
               <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip={item.title}>
+                <SidebarMenuButton
+                  asChild
+                  tooltip={item.title}
+                  data-active={active ? "true" : undefined}
+                  className={active ? "text-primary font-medium" : ""}
+                >
                   <Link to={item.url ?? "#"}>
                     <item.icon />
                     <span>{item.title}</span>
@@ -57,22 +84,37 @@ export function NavMain({
                     </CollapsibleTrigger>
                     <CollapsibleContent>
                       <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
+                        {item.items?.map((subItem) => {
+                          const subItemActive = location.pathname.startsWith(
+                            subItem.url
+                          );
+
+                          return (
                             <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
+                              <SidebarMenuSubButton
+                                asChild
+                                data-active={subItemActive ? "true" : undefined}
+                                className={
+                                  subItemActive
+                                    ? "text-primary font-medium"
+                                    : ""
+                                }
+                              >
                                 <Link to={subItem.url}>
                                   <span>{subItem.title}</span>
                                 </Link>
                               </SidebarMenuSubButton>
                             </SidebarMenuSubItem>
-                      ))}
+                          );
+                        })}
                       </SidebarMenuSub>
                     </CollapsibleContent>
                   </>
                 ) : null}
               </SidebarMenuItem>
             </Collapsible>
-        ))}
+          );
+        })}
       </SidebarMenu>
     </SidebarGroup>
   );