41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
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 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(() => {
|
|
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="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>
|
|
</div>
|
|
);
|
|
}
|