50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Navbar from '@/components/ui/Navbar';
|
|
import Sidebar from '@/components/ui/Sidebar';
|
|
import { ThemeProvider } from '@/components/theme-provider';
|
|
import { Toaster } from '@/components/ui/toaster';
|
|
|
|
interface ClientLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function ClientLayout({ children }: ClientLayoutProps) {
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
|
|
// Load sidebar state from localStorage on mount
|
|
useEffect(() => {
|
|
const savedState = localStorage.getItem('sidebarCollapsed');
|
|
if (savedState !== null) {
|
|
setIsSidebarCollapsed(JSON.parse(savedState));
|
|
}
|
|
}, []);
|
|
|
|
// Save sidebar state to localStorage when it changes
|
|
useEffect(() => {
|
|
localStorage.setItem('sidebarCollapsed', JSON.stringify(isSidebarCollapsed));
|
|
}, [isSidebarCollapsed]);
|
|
|
|
return (
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="system"
|
|
enableSystem
|
|
disableTransitionOnChange
|
|
>
|
|
<div className="min-h-screen">
|
|
<Sidebar isCollapsed={isSidebarCollapsed} />
|
|
<div className={`flex flex-col min-h-screen transition-all duration-300 ease-in-out ${
|
|
isSidebarCollapsed ? 'md:ml-0' : 'md:ml-64'
|
|
}`}>
|
|
<Navbar onSidebarToggle={() => setIsSidebarCollapsed(!isSidebarCollapsed)} isSidebarCollapsed={isSidebarCollapsed} />
|
|
<main className="flex-1 p-2">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<Toaster />
|
|
</ThemeProvider>
|
|
);
|
|
}
|