| import React, { useState } from 'react'; |
| import { Outlet } from 'react-router-dom'; |
| import Sidebar from './Sidebar'; |
| import Navbar from './Navbar'; |
| import { useTheme } from '../context/ThemeContext'; |
|
|
| const Layout = () => { |
| const [sidebarOpen, setSidebarOpen] = useState(true); |
| const { isDark, toggleTheme } = useTheme(); |
|
|
| return ( |
| <div className="min-h-screen bg-gray-50 dark:bg-gray-900"> |
| <Sidebar |
| isOpen={sidebarOpen} |
| onToggle={() => setSidebarOpen(!sidebarOpen)} |
| /> |
| <div className={`transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-16'}`}> |
| <Navbar |
| onSidebarToggle={() => setSidebarOpen(!sidebarOpen)} |
| onThemeToggle={toggleTheme} |
| isDarkMode={isDark} |
| /> |
| <main className="p-6"> |
| <Outlet /> |
| </main> |
| </div> |
| </div> |
| ); |
| }; |
|
|
| export default Layout; |
