gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/routes/_dashboard.tsx · v0.3.2
Source
1 1eb203e Mrdn 2y ago import {
2 c5c71ec Mardin 2y ago Header,
3 c5c71ec Mardin 2y ago ResizableHandle,
4 c5c71ec Mardin 2y ago ResizablePanel,
5 c5c71ec Mardin 2y ago ResizablePanelGroup,
6 c5c71ec Mardin 2y ago Toaster,
7 c5c71ec Mardin 2y ago Loading,
8 c5c71ec Mardin 2y ago HeaderLogo,
9 c5c71ec Mardin 2y ago HeaderMenu,
10 3d1a4b1 Mrdn 2y ago } from "@marzneshin/components";
11 3d1a4b1 Mrdn 2y ago import { useAuth } from "@marzneshin/features/auth";
12 88bdde2 Mrdn 2y ago import { DashboardSidebar, ToggleButton } from "@marzneshin/features/sidebar";
13 3d1a4b1 Mrdn 2y ago import { usePanelToggle } from "@marzneshin/features/sidebar/use-panel-toggle";
14 3d1a4b1 Mrdn 2y ago import { useScreenBreakpoint } from "@marzneshin/hooks/use-screen-breakpoint";
15 3d1a4b1 Mrdn 2y ago import { cn } from "@marzneshin/utils";
16 03b3dbc Mardin 2y ago import { Suspense } from "react";
17 03b3dbc Mardin 2y ago import {
18 c5c71ec Mardin 2y ago Outlet,
19 c5c71ec Mardin 2y ago Link,
20 c5c71ec Mardin 2y ago createFileRoute,
21 c5c71ec Mardin 2y ago redirect
22 03b3dbc Mardin 2y ago } from "@tanstack/react-router";
23 c5c71ec Mardin 2y ago import { GithubRepo } from "@marzneshin/features/github-repo";
24 c5c71ec Mardin 2y ago import { CommandBox } from "@marzneshin/features/search-command";
25 7bd6cce Mardin 2y ago import { DashboardBottomMenu } from "@marzneshin/features/bottom-menu";
26 7bd6cce Mardin 2y ago import { VersionIndicator } from "@marzneshin/features/version-indicator";
27 7bd6cce Mardin 2y ago import { Settings } from "lucide-react";
28 1eb203e Mrdn 2y ago
29 1eb203e Mrdn 2y ago export const DashboardLayout = () => {
30 c5c71ec Mardin 2y ago const isDesktop = useScreenBreakpoint("md");
31 c5c71ec Mardin 2y ago const {
32 c5c71ec Mardin 2y ago collapsed,
33 c5c71ec Mardin 2y ago panelRef,
34 c5c71ec Mardin 2y ago setCollapsed,
35 c5c71ec Mardin 2y ago toggleCollapse,
36 c5c71ec Mardin 2y ago } = usePanelToggle(isDesktop);
37 7bd6cce Mardin 2y ago const { isSudo } = useAuth();
38 1eb203e Mrdn 2y ago
39 c5c71ec Mardin 2y ago return (
40 c5c71ec Mardin 2y ago <div className="flex flex-col w-screen h-screen">
41 c5c71ec Mardin 2y ago <Header
42 65afe33 Mardin 2y ago start={
43 c5c71ec Mardin 2y ago <>
44 c5c71ec Mardin 2y ago <Link to="/">
45 c5c71ec Mardin 2y ago <HeaderLogo />
46 c5c71ec Mardin 2y ago </Link>
47 65afe33 Mardin 2y ago {isDesktop && (
48 65afe33 Mardin 2y ago
49 65afe33 Mardin 2y ago <ToggleButton
50 65afe33 Mardin 2y ago collapsed={collapsed}
51 65afe33 Mardin 2y ago onToggle={toggleCollapse}
52 65afe33 Mardin 2y ago />
53 65afe33 Mardin 2y ago )}
54 c5c71ec Mardin 2y ago </>
55 c5c71ec Mardin 2y ago }
56 7bd6cce Mardin 2y ago center={<CommandBox />}
57 c5c71ec Mardin 2y ago end={
58 c5c71ec Mardin 2y ago <>
59 c5c71ec Mardin 2y ago <GithubRepo variant={isDesktop ? "full" : "mini"} />
60 65afe33 Mardin 2y ago {(!isDesktop && isSudo()) && (<Link to="/settings">
61 65afe33 Mardin 2y ago <Settings className="bg-gray-800 text-secondary dark:hover:bg-secondary-foreground dark:hover:text-secondary dark:text-secondary-foreground size-10 rounded-md text-2xl p-2" />
62 65afe33 Mardin 2y ago </Link>
63 65afe33 Mardin 2y ago )}
64 c5c71ec Mardin 2y ago <HeaderMenu />
65 c5c71ec Mardin 2y ago </>
66 c5c71ec Mardin 2y ago }
67 88bdde2 Mrdn 2y ago />
68 7bd6cce Mardin 2y ago <div className="flex flex-1 overflow-hidden">
69 7bd6cce Mardin 2y ago {isDesktop ? (
70 7bd6cce Mardin 2y ago <ResizablePanelGroup direction="horizontal" className="flex h-full w-full">
71 7bd6cce Mardin 2y ago <ResizablePanel
72 7bd6cce Mardin 2y ago collapsible
73 7bd6cce Mardin 2y ago collapsedSize={2}
74 7bd6cce Mardin 2y ago onCollapse={() => setCollapsed(true)}
75 7bd6cce Mardin 2y ago onExpand={() => setCollapsed(false)}
76 7bd6cce Mardin 2y ago minSize={15}
77 7bd6cce Mardin 2y ago className={cn("w-[120px] min-w-[70px]")}
78 7bd6cce Mardin 2y ago defaultSize={20}
79 7bd6cce Mardin 2y ago ref={panelRef}
80 7bd6cce Mardin 2y ago maxSize={30}
81 7bd6cce Mardin 2y ago >
82 7bd6cce Mardin 2y ago <DashboardSidebar
83 7bd6cce Mardin 2y ago collapsed={collapsed}
84 7bd6cce Mardin 2y ago setCollapsed={setCollapsed}
85 7bd6cce Mardin 2y ago />
86 7bd6cce Mardin 2y ago </ResizablePanel>
87 7bd6cce Mardin 2y ago <ResizableHandle withHandle className="w-[2px]" />
88 7bd6cce Mardin 2y ago <ResizablePanel className="flex-col flex justify-between">
89 7bd6cce Mardin 2y ago <main className="flex flex-col h-full">
90 7bd6cce Mardin 2y ago <Suspense fallback={<Loading />}>
91 7bd6cce Mardin 2y ago <Outlet />
92 7bd6cce Mardin 2y ago </Suspense>
93 7bd6cce Mardin 2y ago </main>
94 7bd6cce Mardin 2y ago <footer className="h-10 py-2">
95 7bd6cce Mardin 2y ago <VersionIndicator />
96 7bd6cce Mardin 2y ago </footer>
97 7bd6cce Mardin 2y ago </ResizablePanel>
98 7bd6cce Mardin 2y ago </ResizablePanelGroup>
99 7bd6cce Mardin 2y ago ) : (
100 7bd6cce Mardin 2y ago <div className="flex flex-col h-full w-full">
101 7bd6cce Mardin 2y ago <main className="flex flex-col h-full overflow-y-auto">
102 c5c71ec Mardin 2y ago <Suspense fallback={<Loading />}>
103 c5c71ec Mardin 2y ago <Outlet />
104 c5c71ec Mardin 2y ago </Suspense>
105 7bd6cce Mardin 2y ago <footer className="h-30 border-t-3 py-2 px-5">
106 7bd6cce Mardin 2y ago <DashboardBottomMenu variant={isSudo() ? "sudo-admin" : "admin"} />
107 7bd6cce Mardin 2y ago </footer>
108 c5c71ec Mardin 2y ago </main>
109 7bd6cce Mardin 2y ago </div>
110 7bd6cce Mardin 2y ago )}
111 7bd6cce Mardin 2y ago </div>
112 7bd6cce Mardin 2y ago <Toaster position="top-center" />
113 3d1a4b1 Mrdn 2y ago </div>
114 c5c71ec Mardin 2y ago );
115 3d1a4b1 Mrdn 2y ago };
116 88bd1b0 Mrdn 2y ago
117 3d1a4b1 Mrdn 2y ago export const Route = createFileRoute("/_dashboard")({
118 c5c71ec Mardin 2y ago component: () => <DashboardLayout />,
119 c5c71ec Mardin 2y ago beforeLoad: async () => {
120 c5c71ec Mardin 2y ago const loggedIn = await useAuth.getState().isLoggedIn();
121 c5c71ec Mardin 2y ago if (!loggedIn) {
122 c5c71ec Mardin 2y ago throw redirect({
123 c5c71ec Mardin 2y ago to: "/login",
124 c5c71ec Mardin 2y ago });
125 c5c71ec Mardin 2y ago }
126 c5c71ec Mardin 2y ago },
127 3d1a4b1 Mrdn 2y ago });