Improve mobile responsiveness with hamburger menu and drawer sidebar

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