1import { Sidebar, SidebarItem, Tooltip, TooltipContent, TooltipTrigger } from "@marzneshin/components";
 2import { useRouterState } from "@tanstack/react-router";
 3import { FC, useEffect } from "react";
 4import { sidebarItems } from ".";
 5import { cn } from "@marzneshin/utils";
 6
 7
 8interface DashboardSidebarProps {
 9    collapsed: boolean;
10    setCollapsed: (state: boolean) => void;
11}
12
13export const DashboardSidebar: FC<DashboardSidebarProps> = ({ collapsed, setCollapsed }) => {
14    const router = useRouterState();
15    const currentActivePath = router.location.pathname;
16
17    useEffect(() => { }, [collapsed]);
18
19    return (
20        <aside>
21            <nav className="w-full">
22                <Sidebar
23                    sidebar={sidebarItems}
24                    collapsed={collapsed}
25                    setCollapsed={setCollapsed}
26                >
27                    <div className="flex flex-col px-4 w-full h-full">
28                        <Sidebar.Body className="my-3">
29                            {Object.keys(sidebarItems).map((key) =>
30                            (
31                                <div className="w-full" key={key}>
32                                    <Sidebar.Group>{key}</Sidebar.Group>
33                                    {sidebarItems[key].map((item: SidebarItem, i) => (
34                                        <Tooltip>
35                                            <TooltipTrigger className="w-full">
36                                                <Sidebar.Item
37                                                    variant={currentActivePath === item.to ? "active" : "default"}
38                                                    className={cn("my-2 border-transparent", { "w-10 h-10": collapsed })}
39                                                    item={item}
40                                                    key={i}
41                                                />
42                                            </TooltipTrigger>
43                                            <TooltipContent>
44                                                {collapsed && item.title}
45                                            </TooltipContent>
46                                        </Tooltip>
47                                    )
48                                    )}
49                                </div>
50                            )
51                            )}
52                        </Sidebar.Body>
53                    </div>
54                </Sidebar>
55            </nav>
56        </aside>
57    )
58}