rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Active menu item follow react router state

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-26 10:51:29 +01:00
parent 9bc966b32c
commit 56f3c8aea3
2 changed files with 80 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/console/src/components/AppSidebar.tsx
View File

@@ -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",

114
apps/console/src/components/NavMain.tsx
View File

@@ -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,45 +34,87 @@ 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) => (
<Collapsible key={item.title} asChild defaultOpen={item.isActive}>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip={item.title}>
<Link to={item.url ?? "#"}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
{item.items?.length ? (
<>
<CollapsibleTrigger asChild>
<SidebarMenuAction className="data-[state=open]:rotate-90">
<ChevronRight />
<span className="sr-only">Toggle</span>
</SidebarMenuAction>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{item.items?.map((subItem) => (
<SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton asChild>
<Link to={subItem.url}>
<span>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</>
) : null}
</SidebarMenuItem>
</Collapsible>
))}
{items.map((item) => {
const active = isItemActive(item) || item.isActive;
return (
<Collapsible key={item.title} asChild defaultOpen={active}>
<SidebarMenuItem>
<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>
</Link>
</SidebarMenuButton>
{item.items?.length ? (
<>
<CollapsibleTrigger asChild>
<SidebarMenuAction className="data-[state=open]:rotate-90">
<ChevronRight />
<span className="sr-only">Toggle</span>
</SidebarMenuAction>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{item.items?.map((subItem) => {
const subItemActive = location.pathname.startsWith(
subItem.url
);
return (
<SidebarMenuSubItem key={subItem.title}>
<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>
);