Improve mobile responsiveness with hamburger menu and drawer sidebar

app/[lang]/dashboard/DashboardLayoutClient.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import Providers from "@/components/Providers";
+import Sidebar from "@/components/Sidebar";
+import { DictionaryProvider } from "@/components/DictionaryContext";
+
+export default function DashboardLayout({
+  children,
+  dict,
+  lang,
+}: {
+  children: React.ReactNode;
+  dict: any;
+  lang: string;
+}) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <Providers>
+      <DictionaryProvider dictionary={dict}>
+        <div className={`app-layout ${isSidebarOpen ? "sidebar-open" : ""}`}>
+          {/* Mobile Overlay */}
+          <div 
+            className="sidebar-overlay" 
+            onClick={() => setIsSidebarOpen(false)}
+          />
+          
+          <Sidebar 
+            dict={dict} 
+            lang={lang} 
+            onClose={() => setIsSidebarOpen(false)} 
+          />
+          
+          <div className="main-content">
+            {/* Mobile Header */}
+            <header className="mobile-header">
+              <button 
+                className="mobile-menu-btn" 
+                onClick={() => setIsSidebarOpen(true)}
+              >
+                <MenuIcon />
+              </button>
+              <div className="mobile-logo">AyrisMail</div>
+            </header>
+            
+            {children}
+          </div>
+        </div>
+      </DictionaryProvider>
+    </Providers>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  );
+}

app/[lang]/dashboard/layout.tsx

@@ -1,9 +1,7 @@
 import { auth } from "@/auth";
 import { redirect } from "next/navigation";
-import Providers from "@/components/Providers";
-import Sidebar from "@/components/Sidebar";
 import { getDictionary, Locale } from "@/app/dictionaries";
-import { DictionaryProvider } from "@/components/DictionaryContext";
+import DashboardLayoutClient from "./DashboardLayoutClient";
 
 export default async function DashboardLayout(
   props: {
@@ -12,10 +10,7 @@ export default async function DashboardLayout(
   }
 ) {
   const params = await props.params;
-
-  const {
-    children
-  } = props;
+  const { children } = props;
 
   const session = await auth();
   if (!session) redirect(`/${params.lang}/login`);
@@ -23,13 +18,8 @@ export default async function DashboardLayout(
   const dict = await getDictionary(params.lang as Locale);
 
   return (
-    <Providers>
-      <DictionaryProvider dictionary={dict}>
-        <div className="app-layout">
-          <Sidebar dict={dict} lang={params.lang} />
-          <div className="main-content">{children}</div>
-        </div>
-      </DictionaryProvider>
-    </Providers>
+    <DashboardLayoutClient dict={dict} lang={params.lang}>
+      {children}
+    </DashboardLayoutClient>
   );
 }