Refactor New Ui Bumdes 02

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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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" />
-					<Header />
+					<Burger
+						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>