Refactor code structure for improved readability and maintainability

assets/admin/components/layout/AdminLayout.tsx

@@ -1,22 +1,37 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import Sidebar from './Sidebar';
 import Topbar from './Topbar';
 import { useUiStore } from '../../stores/uiStore';
 
 export default function AdminLayout() {
-  const darkMode = useUiStore((s) => s.darkMode);
+  const darkMode      = useUiStore((s) => s.darkMode);
+  const density       = useUiStore((s) => s.density);
+  const brandHue      = useUiStore((s) => s.brandHue);
+  const sidebarOpen   = useUiStore((s) => s.sidebarOpen);
+  const setSidebarOpen = useUiStore((s) => s.setSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', darkMode);
-  }, [darkMode]);
+    const root = document.documentElement;
+    root.classList.toggle('dark', darkMode);
+    root.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+    root.setAttribute('data-density', density);
+    root.style.setProperty('--brand-h', String(brandHue.h));
+    root.style.setProperty('--brand-c', String(brandHue.c));
+  }, [darkMode, density, brandHue]);
 
   return (
-    <div className="flex h-screen overflow-hidden bg-slate-100 dark:bg-gray-950 transition-colors duration-200">
-      <Sidebar />
-      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
-        <Topbar />
-        <main className="flex-1 overflow-y-auto p-5 lg:p-6">
+    <div
+      className="app"
+      data-collapsed={!sidebarOpen ? 'true' : 'false'}
+      data-mobile-open={mobileOpen ? 'true' : 'false'}
+    >
+      <div className="scrim" onClick={() => setMobileOpen(false)} />
+      <Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} />
+      <div className="main">
+        <Topbar onMobileMenuOpen={() => setMobileOpen(true)} />
+        <main className="content">
           <Outlet />
         </main>
       </div>