Refactor New Ui Bumdes 02

src/components/header.tsx

@@ -9,11 +9,18 @@ import {
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconUserShield } from "@tabler/icons-react";
+import {
+	IconLayoutSidebarLeftCollapse,
+	IconUserShield,
+} from "@tabler/icons-react";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists
+import { Bell, Moon, Sun, User as UserIcon } from "lucide-react";
 
-export function Header() {
+interface HeaderProps {
+	onSidebarToggle?: () => void;
+}
+
+export function Header({ onSidebarToggle }: HeaderProps) {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
@@ -56,9 +63,24 @@ export function Header() {
 	return (
 		<Group justify="space-between" w="100%">
 			{/* Title */}
-			<Title order={3} c={"white"}>
+			<Group gap="md">
+				<ActionIcon
+					onClick={onSidebarToggle}
+					variant="subtle"
+					size="lg"
+					radius="xl"
+					visibleFrom="sm"
+					aria-label="Toggle sidebar"
+				>
+					<IconLayoutSidebarLeftCollapse
+						color="white"
+						style={{ width: "70%", height: "70%" }}
+					/>
+				</ActionIcon>
+				{/* <Title order={3} c={"white"}>
 					{getPageTitle()}
-			</Title>
+				</Title> */}
+			</Group>
 
 			{/* Right Section */}
 			<Group gap="md">

src/components/umkm/summary-cards.tsx

@@ -1,19 +1,18 @@
 import {
-	Badge,
+	Avatar,
 	Card,
 	Grid,
 	GridCol,
 	Group,
 	Stack,
 	Text,
-	useMantineColorScheme,
+	useMantineColorScheme
 } from "@mantine/core";
 import {
-	IconBuildingStore,
 	IconCategory,
-	IconCurrency,
 	IconCurrencyDollar,
-	IconUsers,
+	IconTrendingUp,
+	IconUsers
 } from "@tabler/icons-react";
 
 interface KpiCardProps {
@@ -22,9 +21,10 @@ interface KpiCardProps {
 	subtitle?: string;
 	icon: React.ReactNode;
 	color: string;
+	backgroundColor: string;
 }
 
-const KpiCard = ({ title, value, subtitle, icon, color }: KpiCardProps) => {
+const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCardProps) => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
@@ -64,10 +64,10 @@ const KpiCard = ({ title, value, subtitle, icon, color }: KpiCardProps) => {
 						</Text>
 					)}
 				</Stack>
-				<Badge
+				<Avatar
-					variant="light"
 					color={color}
-					p={10}
+					bg={backgroundColor}
+					size={40}
 					radius="xl"
 					style={{
 						display: "flex",
@@ -76,7 +76,7 @@ const KpiCard = ({ title, value, subtitle, icon, color }: KpiCardProps) => {
 					}}
 				>
 					{icon}
-				</Badge>
+				</Avatar>
 			</Group>
 		</Card>
 	);
@@ -106,29 +106,33 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			title: "UMKM Aktif",
 			value: displayData.umkmAktif,
 			subtitle: "Beroperasi",
-			icon: <IconCurrencyDollar size={20} />,
+			icon: <IconCurrencyDollar size={25} />,
-			color: "darmasaba-blue",
+			color: "white",
+			backgroundColor: "#1E3A5F"
 		},
 		{
 			title: "UMKM Terdaftar",
 			value: displayData.umkmTerdaftar,
 			subtitle: "Total registrasi",
-			icon: <IconBuildingStore size={20} />,
+			icon: <IconUsers size={25} />,
-			color: "darmasaba-success",
+			color: "white",
+			backgroundColor: "#1E3A5F"
 		},
 		{
 			title: "Omzet",
 			value: displayData.omzet,
 			subtitle: "Omzet BUMDes per bulan",
-			icon: <IconCurrency size={20} />,
+			icon: <IconTrendingUp size={25} />,
-			color: "darmasaba-warning",
+			color: "white",
+			backgroundColor: "#1E3A5F"
 		},
 		{
 			title: "UMKM Terbanyak",
 			value: displayData.kategoriTerbanyak.count,
 			subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
-			icon: <IconCategory size={20} />,
+			icon: <IconTrendingUp size={25} />,
-			color: "darmasaba-danger",
+			color: "white",
+			backgroundColor: "#1E3A5F"
 		},
 	];
 

src/hooks/use-sidebar-fullscreen.ts

@@ -0,0 +1,25 @@
+import { useDisclosure } from "@mantine/hooks";
+
+export function useSidebarFullscreen() {
+	const [opened, { toggle: toggleMobile }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
+
+	const toggleSidebar = () => {
+		setSidebarCollapsed.toggle();
+	};
+
+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			toggleSidebar();
+		}
+	};
+
+	return {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+		isCollapsed: sidebarCollapsed,
+	};
+}

src/routes/bantuan.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import HelpPage from "@/components/help-page";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/bantuan")({
 	component: BantuanRoute,
 });
 
 function BantuanRoute() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function BantuanRoute() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function BantuanRoute() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<HelpPage />
 			</AppShell.Main>
 		</AppShell>

src/routes/bumdes.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import BumdesPage from "@/components/bumdes-page";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/bumdes")({
 	component: BumdesRoute,
 });
 
 function BumdesRoute() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function BumdesRoute() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function BumdesRoute() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<BumdesPage />
 			</AppShell.Main>
 		</AppShell>

src/routes/demografi-pekerjaan.tsx

@@ -1,8 +1,8 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 import DemografiPekerjaan from "../components/demografi-pekerjaan";
 
 export const Route = createFileRoute("/demografi-pekerjaan")({
@@ -10,7 +10,13 @@ export const Route = createFileRoute("/demografi-pekerjaan")({
 });
 
 function DemografiPekerjaanPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function DemografiPekerjaanPage() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function DemografiPekerjaanPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<DemografiPekerjaan />
 			</AppShell.Main>
 		</AppShell>

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>

src/routes/jenna-analytic.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import JennaAnalytic from "@/components/jenna-analytic";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/jenna-analytic")({
 	component: JennaAnalyticPage,
 });
 
 function JennaAnalyticPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function JennaAnalyticPage() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function JennaAnalyticPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<JennaAnalytic />
 			</AppShell.Main>
 		</AppShell>

src/routes/keamanan.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import KeamananPage from "@/components/keamanan-page";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/keamanan")({
 	component: KeamananRoute,
 });
 
 function KeamananRoute() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function KeamananRoute() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function KeamananRoute() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<KeamananPage />
 			</AppShell.Main>
 		</AppShell>

src/routes/keuangan-anggaran.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import KeuanganAnggaran from "@/components/keuangan-anggaran";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/keuangan-anggaran")({
 	component: KeuanganAnggaranPage,
 });
 
 function KeuanganAnggaranPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function KeuanganAnggaranPage() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function KeuanganAnggaranPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<KeuanganAnggaran />
 			</AppShell.Main>
 		</AppShell>

src/routes/kinerja-divisi.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import KinerjaDivisi from "@/components/kinerja-divisi";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/kinerja-divisi")({
 	component: KinerjaDivisiPage,
 });
 
 function KinerjaDivisiPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function KinerjaDivisiPage() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function KinerjaDivisiPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<KinerjaDivisi />
 			</AppShell.Main>
 		</AppShell>

src/routes/pengaduan-layanan-publik.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/pengaduan-layanan-publik")({
 	component: PengaduanLayananPublikPage,
 });
 
 function PengaduanLayananPublikPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function PengaduanLayananPublikPage() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function PengaduanLayananPublikPage() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<PengaduanLayananPublik />
 			</AppShell.Main>
 		</AppShell>

src/routes/pengaturan/route.tsx

@@ -1,5 +1,5 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { useMediaQuery } from "@mantine/hooks";
 import {
 	createFileRoute,
 	Outlet,
@@ -8,13 +8,20 @@ import {
 import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/pengaturan")({
 	component: PengaturanLayout,
 });
 
 function PengaturanLayout() {
-	const [opened, { toggle, close }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 
 	const isMobile = useMediaQuery("(max-width: 48em)");
@@ -27,9 +34,9 @@ function PengaturanLayout() {
 	// Auto close navbar on route change (mobile only)
 	useEffect(() => {
 		if (isMobile && opened) {
-			close();
+			toggleMobile();
 		}
-	}, [routerState.location.pathname, isMobile, opened, close]);
+	}, [routerState.location.pathname, isMobile, opened, toggleMobile]);
 
 	return (
 		<AppShell
@@ -37,14 +44,19 @@ function PengaturanLayout() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="lg" align="center" wrap="nowrap">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -58,7 +70,11 @@ function PengaturanLayout() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<div className="p-2">
 					<Outlet />
 				</div>

src/routes/sosial.tsx

@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
 import SosialPage from "@/components/sosial-page";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 
 export const Route = createFileRoute("/sosial")({
 	component: SosialRoute,
 });
 
 function SosialRoute() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function SosialRoute() {
 			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" />
+					<Burger
-					<Header />
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>
 
@@ -43,7 +54,11 @@ function SosialRoute() {
 				</div>
 			</AppShell.Navbar>
 
-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<SosialPage />
 			</AppShell.Main>
 		</AppShell>