1import { Sidebar, SidebarItem } 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                                        <Sidebar.Item
35                                            variant={currentActivePath === item.to ? "active" : "default"}
36                                            className={cn("my-2 border-transparent", { "w-10 h-10": collapsed })}
37                                            item={item}
38                                            key={i}
39                                        />
40                                    )
41                                    )}
42                                </div>
43                            )
44                            )}
45                        </Sidebar.Body>
46                    </div>
47                </Sidebar>
48            </nav>
49        </aside>
50    )
51}