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-alpha
Source
1 1eb203e Mrdn 2y ago import {
2 1eb203e Mrdn 2y ago Drawer,
3 1eb203e Mrdn 2y ago DrawerContent,
4 1eb203e Mrdn 2y ago Header,
5 1eb203e Mrdn 2y ago ResizableHandle,
6 1eb203e Mrdn 2y ago ResizablePanel,
7 b15ff05 Mrdn 2y ago ResizablePanelGroup,
8 b15ff05 Mrdn 2y ago Toaster
9 1eb203e Mrdn 2y ago } from '@marzneshin/components'
10 1eb203e Mrdn 2y ago import { NavigationDirectory } from '@marzneshin/components/nav-dir';
11 4466347 Mrdn 2y ago import { useAuth } from '@marzneshin/features/auth'
12 1eb203e Mrdn 2y ago import { DashboardSidebar, ToggleButton, sidebarItems } from '@marzneshin/features/sidebar';
13 1eb203e Mrdn 2y ago import { usePanelToggle } from '@marzneshin/features/sidebar/use-panel-toggle';
14 b15ff05 Mrdn 2y ago import { useScreenBreakpoint } from '@marzneshin/hooks/use-screen-breakpoint';
15 1eb203e Mrdn 2y ago import { cn } from '@marzneshin/utils';
16 1eb203e Mrdn 2y ago import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
17 1eb203e Mrdn 2y ago
18 1eb203e Mrdn 2y ago export const DashboardLayout = () => {
19 3b7feef Mrdn 2y ago const isDesktop = useScreenBreakpoint("md");
20 1eb203e Mrdn 2y ago const { collapsed, panelRef, open, setCollapsed, setOpen, toggleCollapse, toggleOpen } = usePanelToggle(isDesktop);
21 1eb203e Mrdn 2y ago
22 1eb203e Mrdn 2y ago return (
23 1eb203e Mrdn 2y ago <div className="flex flex-col w-screen h-screen">
24 1eb203e Mrdn 2y ago <header className="h-[3.5rem]">
25 1eb203e Mrdn 2y ago <Header>
26 1eb203e Mrdn 2y ago <ToggleButton
27 1eb203e Mrdn 2y ago isDesktop={isDesktop}
28 1eb203e Mrdn 2y ago collapsed={collapsed}
29 1eb203e Mrdn 2y ago open={open}
30 1eb203e Mrdn 2y ago onToggle={isDesktop ? toggleCollapse : toggleOpen}
31 1eb203e Mrdn 2y ago />
32 1eb203e Mrdn 2y ago <NavigationDirectory sidebar={sidebarItems} />
33 1eb203e Mrdn 2y ago </Header>
34 1eb203e Mrdn 2y ago </header>
35 1eb203e Mrdn 2y ago {isDesktop ?
36 1eb203e Mrdn 2y ago (
37 1eb203e Mrdn 2y ago <ResizablePanelGroup direction="horizontal" className="block sm:hidden">
38 1eb203e Mrdn 2y ago <ResizablePanel
39 1eb203e Mrdn 2y ago collapsible
40 3b7feef Mrdn 2y ago collapsedSize={2}
41 1eb203e Mrdn 2y ago onCollapse={() => setCollapsed(true)}
42 1eb203e Mrdn 2y ago onExpand={() => setCollapsed(false)}
43 1eb203e Mrdn 2y ago minSize={15}
44 3b7feef Mrdn 2y ago className={cn("w-[120px] min-w-[70px]")}
45 1eb203e Mrdn 2y ago defaultSize={20}
46 1eb203e Mrdn 2y ago ref={panelRef}
47 1eb203e Mrdn 2y ago maxSize={30}>
48 1eb203e Mrdn 2y ago <DashboardSidebar collapsed={collapsed} setCollapsed={setCollapsed} />
49 1eb203e Mrdn 2y ago </ResizablePanel>
50 1eb203e Mrdn 2y ago <ResizableHandle withHandle className="w-[2px]" />
51 1eb203e Mrdn 2y ago <ResizablePanel>
52 1eb203e Mrdn 2y ago <main>
53 1eb203e Mrdn 2y ago <Outlet />
54 3b7feef Mrdn 2y ago <Toaster position="top-center" />
55 1eb203e Mrdn 2y ago </main>
56 1eb203e Mrdn 2y ago </ResizablePanel>
57 1eb203e Mrdn 2y ago </ResizablePanelGroup>
58 1eb203e Mrdn 2y ago ) : (
59 1eb203e Mrdn 2y ago <div>
60 1eb203e Mrdn 2y ago <aside>
61 1eb203e Mrdn 2y ago <Drawer open={open} onOpenChange={setOpen}>
62 1eb203e Mrdn 2y ago <DrawerContent>
63 1eb203e Mrdn 2y ago <DashboardSidebar collapsed={collapsed} setCollapsed={setCollapsed} />
64 1eb203e Mrdn 2y ago </DrawerContent>
65 1eb203e Mrdn 2y ago </Drawer>
66 1eb203e Mrdn 2y ago </aside>
67 1eb203e Mrdn 2y ago <main className="sm:block">
68 1eb203e Mrdn 2y ago <Outlet />
69 b15ff05 Mrdn 2y ago <Toaster position="top-center" />
70 1eb203e Mrdn 2y ago </main>
71 1eb203e Mrdn 2y ago </div>
72 1eb203e Mrdn 2y ago )}
73 1eb203e Mrdn 2y ago </div>
74 1eb203e Mrdn 2y ago )
75 1eb203e Mrdn 2y ago }
76 88bd1b0 Mrdn 2y ago
77 88bd1b0 Mrdn 2y ago export const Route = createFileRoute('/_dashboard')({
78 1eb203e Mrdn 2y ago component: () => <DashboardLayout />,
79 4466347 Mrdn 2y ago
80 4466347 Mrdn 2y ago beforeLoad: async () => {
81 4466347 Mrdn 2y ago if (!useAuth.getState().isLoggedIn) {
82 4466347 Mrdn 2y ago throw redirect({
83 4466347 Mrdn 2y ago to: '/login',
84 4466347 Mrdn 2y ago })
85 4466347 Mrdn 2y ago }
86 4466347 Mrdn 2y ago }
87 4466347 Mrdn 2y ago })