Merge pull request #191 from AbhijitPrajapati12/feat/sidebar

SideBar enhancement for Dashboard

Author: apsinghdev

apps/web/src/app/(main)/dashboard/layout.tsx

@@ -28,22 +28,47 @@ export default function DashboardLayout({
           </div>
         )}
       </AnimatePresence>
-      <div className="flex-1 flex flex-col h-full bg-dash-base">
-        <div className="xl:hidden flex items-center h-16 px-4 border-b border-dash-border bg-dash-base">
-          <IconWrapper onClick={() => setShowSidebar(true)}>
-            <Bars3Icon className="size-5 text-brand-purple" />
-          </IconWrapper>
-          <Link
-            href="/"
-            className="ml-4 text-lg font-semibold text-text-primary hover:text-brand-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-dash-base">
-          {children}
-        </main>
-      </div>
+      )}
     </div>
   );
 }