Refactor New Ui Bumdes 02

src/routes/index.tsx

@@ -11,25 +11,32 @@ export const Route = createFileRoute("/")({
 
 function DashboardPage() {
 	const [opened, { toggle }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
 	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
 
+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			setSidebarCollapsed.toggle();
+		}
+	};
+
 	return (
 		<AppShell
 			header={{ height: 60 }}
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
 					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Header onSidebarToggle={setSidebarCollapsed.toggle} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +50,11 @@ function DashboardPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<DashboardContent />
 			</AppShell.Main>
 		</AppShell>