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