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