hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
26 lines
755 B
TypeScript
26 lines
755 B
TypeScript
import React, { useEffect } 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);
|
|
|
|
useEffect(() => {
|
|
document.documentElement.classList.toggle('dark', darkMode);
|
|
}, [darkMode]);
|
|
|
|
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">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|