feature: Introduce a separate sidebar for the mobile

1 files changed, 11 insertions, 3 deletions

diff --git a/packages/web/app/dashboard/layout.tsx b/packages/web/app/dashboard/layout.tsx
index 9d3568a5..393ad8bb 100644
--- a/packages/web/app/dashboard/layout.tsx
+++ b/packages/web/app/dashboard/layout.tsx
@@ -1,3 +1,5 @@
+import { Separator } from "@/components/ui/separator";
+import MobileSidebar from "./components/ModileSidebar";
 import Sidebar from "./components/Sidebar";
 
 export default async function Dashboard({
@@ -6,11 +8,17 @@ export default async function Dashboard({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex h-screen w-screen">
-      <div className="flex-none">
+    <div className="flex h-screen w-screen flex-col sm:flex-row">
+      <div className="hidden flex-none sm:flex">
         <Sidebar />
       </div>
-      <main className="flex-1 overflow-y-auto bg-gray-100">{children}</main>
+      <main className="flex-1 overflow-y-auto bg-gray-100">
+        <div className="block w-full sm:hidden">
+          <MobileSidebar />
+          <Separator />
+        </div>
+        {children}
+      </main>
     </div>
   );
 }