nico
5801eb4596
- Add text truncation for title on mobile screens - Hide user info section on mobile, show simplified icons only - Update seed.ts to create admin and demo users with proper password hashing - Add bcryptjs for password hashing in seed script - Update QWEN.md documentation with seed command and default users Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import {
|
|
AppShell,
|
|
Burger,
|
|
Group,
|
|
useMantineColorScheme,
|
|
useMantineTheme,
|
|
} from "@mantine/core";
|
|
import { useDisclosure, useMediaQuery } from "@mantine/hooks";
|
|
import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
|
|
import { useEffect } from "react";
|
|
import { Header } from "@/components/header";
|
|
import { Sidebar } from "@/components/sidebar";
|
|
|
|
export const Route = createFileRoute("/dashboard")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const [opened, { toggle, close }] = useDisclosure();
|
|
const { colorScheme } = useMantineColorScheme();
|
|
const theme = useMantineTheme();
|
|
const routerState = useRouterState();
|
|
|
|
const isMobile = useMediaQuery("(max-width: 48em)");
|
|
|
|
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
|
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
|
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
|
|
|
// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
|
|
useEffect(() => {
|
|
if (isMobile && opened) {
|
|
close();
|
|
}
|
|
}, [routerState.location.pathname]);
|
|
|
|
return (
|
|
<AppShell
|
|
header={{ height: 60 }}
|
|
navbar={{
|
|
width: 300,
|
|
breakpoint: "sm",
|
|
collapsed: { mobile: !opened },
|
|
}}
|
|
padding="md"
|
|
>
|
|
<AppShell.Header bg={headerBgColor}>
|
|
<Group
|
|
h="100%"
|
|
px="lg"
|
|
align="center"
|
|
wrap="nowrap"
|
|
>
|
|
<Burger
|
|
opened={opened}
|
|
onClick={toggle}
|
|
hiddenFrom="sm"
|
|
size="sm"
|
|
/>
|
|
|
|
<Header />
|
|
</Group>
|
|
</AppShell.Header>
|
|
|
|
<AppShell.Navbar
|
|
p="md"
|
|
bg={navbarBgColor}
|
|
style={{ display: "flex", flexDirection: "column" }}
|
|
>
|
|
<div style={{ flex: 1, overflowY: "auto" }}>
|
|
<Sidebar />
|
|
</div>
|
|
</AppShell.Navbar>
|
|
|
|
<AppShell.Main bg={mainBgColor}>
|
|
<Outlet />
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
}
|