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