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