From 768e0100441487b5de9e1202b4b95ff9da4d133c Mon Sep 17 00:00:00 2001
From: Abhijit Prajapati <abhijit@symboinsurance.com>
Date: Tue, 18 Nov 2025 21:35:52 +0530
Subject: [PATCH] SideBar enhancement for Dashboard

---
 apps/web/src/app/(main)/dashboard/layout.tsx | 52 +++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/(main)/dashboard/layout.tsx b/apps/web/src/app/(main)/dashboard/layout.tsx
index 936e28c7..df754d87 100644
--- a/apps/web/src/app/(main)/dashboard/layout.tsx
+++ b/apps/web/src/app/(main)/dashboard/layout.tsx
@@ -28,19 +28,47 @@ export default function DashboardLayout({
           </div>
         )}
       </AnimatePresence>
-      <div className="flex-1 flex flex-col h-full bg-ox-content">
-        <div className="xl:hidden flex items-center h-16 px-4 border-b border-ox-header bg-ox-content">
-          <IconWrapper onClick={() => setShowSidebar(true)}>
-            <Bars3Icon className="size-5 text-ox-purple" />
-          </IconWrapper>
-          <Link href="/" className="ml-4 text-lg font-semibold text-ox-white hover:text-ox-purple transition-colors">
-            Opensox
-          </Link>
+      {showSidebar && (
+        <div
+          onClick={() => setShowSidebar(false)}
+          className="fixed inset-0 xl:hidden"
+        >
+          <div className="flex-1 flex flex-col h-full bg-ox-content">
+            <div className="xl:hidden flex items-center h-16 px-4 border-b border-ox-header bg-ox-content">
+              <IconWrapper>
+                <Bars3Icon className="size-5 text-ox-purple" />
+              </IconWrapper>
+              <Link
+                href="/"
+                className="ml-4 text-lg font-semibold text-ox-white hover:text-ox-purple transition-colors"
+              >
+                Opensox
+              </Link>
+            </div>
+            <main className="flex-1 h-full overflow-auto bg-ox-content">
+              {children}
+            </main>
+          </div>
+        </div>
+      )}
+      {!showSidebar && (
+        <div className="flex-1 flex flex-col h-full bg-ox-content">
+          <div className="xl:hidden flex items-center h-16 px-4 border-b border-ox-header bg-ox-content">
+            <IconWrapper onClick={() => setShowSidebar(true)}>
+              <Bars3Icon className="size-5 text-ox-purple" />
+            </IconWrapper>
+            <Link
+              href="/"
+              className="ml-4 text-lg font-semibold text-ox-white hover:text-ox-purple transition-colors"
+            >
+              Opensox
+            </Link>
+          </div>
+          <main className="flex-1 h-full overflow-auto bg-ox-content">
+            {children}
+          </main>
         </div>
-        <main className="flex-1 h-full overflow-auto bg-ox-content">
-          {children}
-        </main>
-      </div>
+      )}
     </div>
   );
 }