since3-portal/modules/shared/ui/components/clients-menu-item.tsx

"use client"

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRightIcon, UsersRoundIcon } from "lucide-react";
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    useSidebar,
} from "@/components/ui/sidebar";
import { getClientDetailMenu } from "@/modules/shared/data/sidebar-menu-content";

export function ClientsMenuItem() {
    const pathname = usePathname();
    const { setOpenMobile } = useSidebar();

    const detailMatch = pathname.match(/^\/admin\/clients\/([^/]+)/);
    const clientId = detailMatch?.[1];

    if (!clientId) {
        const isActive = pathname === "/admin/clients";

        return (
            <SidebarMenuItem>
                <SidebarMenuButton
                    render={<Link href="/admin/clients" onClick={() => setOpenMobile(false)} />}
                    isActive={isActive}
                    className="h-10 text-[0.95rem]"
                >
                    <UsersRoundIcon className="size-4.5" />
                    <span>Clients</span>
                </SidebarMenuButton>
            </SidebarMenuItem>
        );
    }

    const menu = getClientDetailMenu(clientId);

    return (
        <Collapsible defaultOpen>
            <SidebarMenuItem>
                <div className="relative">
                    <SidebarMenuButton
                        render={<Link href="/admin/clients" onClick={() => setOpenMobile(false)} />}
                        className="h-10 pr-9 text-[0.95rem]"
                    >
                        <UsersRoundIcon className="size-4.5" />
                        <span>Clients</span>
                    </SidebarMenuButton>
                    <CollapsibleTrigger
                        render={
                            <button
                                type="button"
                                aria-label="Client-Menü umschalten"
                                className="group absolute top-1/2 right-1.5 -translate-y-1/2 rounded-md p-1.5 hover:bg-sidebar-accent"
                            />
                        }
                    >
                        <ChevronRightIcon className="size-4 transition-transform group-data-panel-open:rotate-90" />
                    </CollapsibleTrigger>
                </div>
                <CollapsibleContent>
                    <SidebarMenuSub>
                        {menu.map((item) => {
                            const isActive = pathname === item.url;

                            return (
                                <SidebarMenuSubItem key={item.url}>
                                    <SidebarMenuSubButton
                                        render={<Link href={item.url} onClick={() => setOpenMobile(false)} />}
                                        isActive={isActive}
                                    >
                                        <item.icon className="size-4" />
                                        <span>{item.title}</span>
                                    </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                            );
                        })}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuItem>
        </Collapsible>
    );
}