gitscope
/
← marzneshin / dashboard/src/routes/_dashboard.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/routes/_dashboard.tsx · v0.3.0
Source
1 1eb203e Mrdn 2y ago import {
2 88bdde2 Mrdn 2y ago Drawer,
3 88bdde2 Mrdn 2y ago DrawerContent,
4 88bdde2 Mrdn 2y ago Header,
5 88bdde2 Mrdn 2y ago ResizableHandle,
6 88bdde2 Mrdn 2y ago ResizablePanel,
7 88bdde2 Mrdn 2y ago ResizablePanelGroup,
8 88bdde2 Mrdn 2y ago Toaster,
9 3d1a4b1 Mrdn 2y ago } from "@marzneshin/components";
10 3d1a4b1 Mrdn 2y ago import { useAuth } from "@marzneshin/features/auth";
11 88bdde2 Mrdn 2y ago import { DashboardSidebar, ToggleButton } from "@marzneshin/features/sidebar";
12 3d1a4b1 Mrdn 2y ago import { usePanelToggle } from "@marzneshin/features/sidebar/use-panel-toggle";
13 3d1a4b1 Mrdn 2y ago import { useScreenBreakpoint } from "@marzneshin/hooks/use-screen-breakpoint";
14 3d1a4b1 Mrdn 2y ago import { cn } from "@marzneshin/utils";
15 3d1a4b1 Mrdn 2y ago import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
16 1eb203e Mrdn 2y ago
17 1eb203e Mrdn 2y ago export const DashboardLayout = () => {
18 88bdde2 Mrdn 2y ago const isDesktop = useScreenBreakpoint("md");
19 88bdde2 Mrdn 2y ago const {
20 88bdde2 Mrdn 2y ago collapsed,
21 88bdde2 Mrdn 2y ago panelRef,
22 88bdde2 Mrdn 2y ago open,
23 88bdde2 Mrdn 2y ago setCollapsed,
24 88bdde2 Mrdn 2y ago setOpen,
25 88bdde2 Mrdn 2y ago toggleCollapse,
26 88bdde2 Mrdn 2y ago toggleOpen,
27 88bdde2 Mrdn 2y ago } = usePanelToggle(isDesktop);
28 1eb203e Mrdn 2y ago
29 88bdde2 Mrdn 2y ago return (
30 88bdde2 Mrdn 2y ago <div className="flex flex-col w-screen h-screen">
31 88bdde2 Mrdn 2y ago <header className="h-[3.5rem]">
32 88bdde2 Mrdn 2y ago <Header>
33 88bdde2 Mrdn 2y ago <ToggleButton
34 88bdde2 Mrdn 2y ago isDesktop={isDesktop}
35 88bdde2 Mrdn 2y ago collapsed={collapsed}
36 88bdde2 Mrdn 2y ago open={open}
37 88bdde2 Mrdn 2y ago onToggle={isDesktop ? toggleCollapse : toggleOpen}
38 88bdde2 Mrdn 2y ago />
39 88bdde2 Mrdn 2y ago </Header>
40 88bdde2 Mrdn 2y ago </header>
41 88bdde2 Mrdn 2y ago {isDesktop ? (
42 88bdde2 Mrdn 2y ago <ResizablePanelGroup direction="horizontal" className="block sm:hidden">
43 88bdde2 Mrdn 2y ago <ResizablePanel
44 88bdde2 Mrdn 2y ago collapsible
45 88bdde2 Mrdn 2y ago collapsedSize={2}
46 88bdde2 Mrdn 2y ago onCollapse={() => setCollapsed(true)}
47 88bdde2 Mrdn 2y ago onExpand={() => setCollapsed(false)}
48 88bdde2 Mrdn 2y ago minSize={15}
49 88bdde2 Mrdn 2y ago className={cn("w-[120px] min-w-[70px]")}
50 88bdde2 Mrdn 2y ago defaultSize={20}
51 88bdde2 Mrdn 2y ago ref={panelRef}
52 88bdde2 Mrdn 2y ago maxSize={30}
53 88bdde2 Mrdn 2y ago >
54 88bdde2 Mrdn 2y ago <DashboardSidebar
55 88bdde2 Mrdn 2y ago collapsed={collapsed}
56 88bdde2 Mrdn 2y ago setCollapsed={setCollapsed}
57 88bdde2 Mrdn 2y ago />
58 88bdde2 Mrdn 2y ago </ResizablePanel>
59 88bdde2 Mrdn 2y ago <ResizableHandle withHandle className="w-[2px]" />
60 88bdde2 Mrdn 2y ago <ResizablePanel>
61 88bdde2 Mrdn 2y ago <main>
62 88bdde2 Mrdn 2y ago <Outlet />
63 88bdde2 Mrdn 2y ago <Toaster position="top-center" />
64 88bdde2 Mrdn 2y ago </main>
65 88bdde2 Mrdn 2y ago </ResizablePanel>
66 88bdde2 Mrdn 2y ago </ResizablePanelGroup>
67 88bdde2 Mrdn 2y ago ) : (
68 88bdde2 Mrdn 2y ago <div>
69 88bdde2 Mrdn 2y ago <aside>
70 88bdde2 Mrdn 2y ago <Drawer open={open} onOpenChange={setOpen}>
71 88bdde2 Mrdn 2y ago <DrawerContent>
72 88bdde2 Mrdn 2y ago <DashboardSidebar
73 88bdde2 Mrdn 2y ago collapsed={collapsed}
74 88bdde2 Mrdn 2y ago setCollapsed={setCollapsed}
75 88bdde2 Mrdn 2y ago setOpen={setOpen}
76 88bdde2 Mrdn 2y ago open={open}
77 88bdde2 Mrdn 2y ago />
78 88bdde2 Mrdn 2y ago </DrawerContent>
79 88bdde2 Mrdn 2y ago </Drawer>
80 88bdde2 Mrdn 2y ago </aside>
81 88bdde2 Mrdn 2y ago <main className="sm:block">
82 88bdde2 Mrdn 2y ago <Outlet />
83 88bdde2 Mrdn 2y ago <Toaster position="top-center" />
84 88bdde2 Mrdn 2y ago </main>
85 3d1a4b1 Mrdn 2y ago </div>
86 88bdde2 Mrdn 2y ago )}
87 88bdde2 Mrdn 2y ago </div>
88 88bdde2 Mrdn 2y ago );
89 3d1a4b1 Mrdn 2y ago };
90 88bd1b0 Mrdn 2y ago
91 3d1a4b1 Mrdn 2y ago export const Route = createFileRoute("/_dashboard")({
92 88bdde2 Mrdn 2y ago component: () => <DashboardLayout />,
93 4466347 Mrdn 2y ago
94 88bdde2 Mrdn 2y ago beforeLoad: async () => {
95 88bdde2 Mrdn 2y ago const loggedIn = await useAuth.getState().isLoggedIn();
96 88bdde2 Mrdn 2y ago if (!loggedIn) {
97 88bdde2 Mrdn 2y ago throw redirect({
98 88bdde2 Mrdn 2y ago to: "/login",
99 88bdde2 Mrdn 2y ago });
100 88bdde2 Mrdn 2y ago }
101 88bdde2 Mrdn 2y ago },
102 3d1a4b1 Mrdn 2y ago });