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>
+  );
+}