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