48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import Sidebar from './Sidebar';
|
|
import Topbar from './Topbar';
|
|
|
|
export default function Layout() {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isCollapsed, setIsCollapsed] = useState(() => {
|
|
try {
|
|
return localStorage.getItem('canina_admin_sidebar_collapsed') === 'true';
|
|
} catch {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
const toggleCollapse = () => {
|
|
setIsCollapsed((prev) => {
|
|
const next = !prev;
|
|
try {
|
|
localStorage.setItem('canina_admin_sidebar_collapsed', String(next));
|
|
} catch {}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-gray-50 text-gray-900 font-vazir relative overflow-x-hidden" dir="rtl">
|
|
<Sidebar
|
|
isOpen={isMobileMenuOpen}
|
|
setIsOpen={setIsMobileMenuOpen}
|
|
isCollapsed={isCollapsed}
|
|
/>
|
|
<div className={`flex-1 flex flex-col min-h-screen w-full transition-all duration-300 ease-in-out ${
|
|
isCollapsed ? 'lg:pr-20' : 'lg:pr-64'
|
|
}`}>
|
|
<Topbar
|
|
toggleMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
isCollapsed={isCollapsed}
|
|
toggleCollapse={toggleCollapse}
|
|
/>
|
|
<main className="flex-1 p-3 sm:p-5 md:p-6 overflow-y-auto overflow-x-hidden max-w-full">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|