From bc58b16ddda458851d4ddb9b184cb18fbaf359c1 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Fri, 12 Jun 2026 12:57:30 +0700
Subject: [PATCH] feat(layout): auto-collapse sidebar when clicking main
 content area

- Import `useUiStore` into `main-layout.tsx` to access the global sidebar state.
- Add an `onClick` event listener to the main content wrapper.
- Automatically close the sidebar if it is expanded and the user clicks outside of it.
- Enhance overall UX by providing a more intuitive, frictionless way to dismiss the navigation menu.
---
 .../web/src/components/layout/main-layout.tsx | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/layout/main-layout.tsx b/apps/web/src/components/layout/main-layout.tsx
index 6ec3a1e..5179f45 100644
--- a/apps/web/src/components/layout/main-layout.tsx
+++ b/apps/web/src/components/layout/main-layout.tsx
@@ -3,19 +3,29 @@ import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import { MobileNav } from "./mobile-nav";
 import { Leaf, Menu } from "lucide-react";
+import { useUiStore } from "@/store/ui-store";
 
 type Props = { children: ReactNode };
 
 export function MainLayout({ children }: Props) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
+  const setIsSidebarOpen = useUiStore((state) => state.setIsSidebarOpen);
+
   return (
     <div className="flex w-full h-screen bg-[#ECF4E8] overflow-hidden relative">
       {/* Sidebar Desktop */}
       <Sidebar />
 
       {/* Main Content */}
-      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
+      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden"
+        onClick={() => {
+          if (isSidebarOpen) {
+            setIsSidebarOpen(false);
+          }
+        }}
+      >
         {/* Header Mobile */}
         <div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
           <div className="flex items-center gap-3 font-semibold">
@@ -40,10 +50,12 @@ export function MainLayout({ children }: Props) {
         </div>
 
         {/* Mobile Navigation */}
-        <MobileNav
-          open={mobileMenuOpen}
-          onClose={() => setMobileMenuOpen(false)}
-        />
+        <div className="block md:hidden shrink-0">
+          <MobileNav
+            open={mobileMenuOpen}
+            onClose={() => setMobileMenuOpen(false)}
+          />
+        </div>
 
         {/* Page Content */}
         <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">