From 4e1ea0a5a8d11546dddba58c9ac5efa39729c9f7 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Thu, 22 Feb 2024 18:28:08 +0000
Subject: feature: Introduce a separate sidebar for the mobile

---
 packages/web/app/dashboard/layout.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages/web/app/dashboard/layout.tsx')

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>
   );
 }
-- 
cgit v1.2.3-70-g09d2