feat: improve header responsiveness and update seed initialization

- 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>

src/routes/dashboard/route.tsx

@@ -1,19 +1,39 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+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";
-import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 
 export const Route = createFileRoute("/dashboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	const [opened, { toggle }] = useDisclosure();
+	const [opened, { toggle, close }] = useDisclosure();
 	const { colorScheme } = useMantineColorScheme();
-	const headerBgColor = colorScheme === 'dark' ? "#11192D" : "#19355E";
-	const navbarBgColor = colorScheme === 'dark' ? "#11192D" : "white";
-	const mainBgColor = colorScheme === 'dark' ? "#11192D" : "#edf3f8ff";
+	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 }}
@@ -25,14 +45,29 @@ function RouteComponent() {
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+				<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' }}>
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
 					<Sidebar />
 				</div>
 			</AppShell.Navbar>