40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { useState, useEffect, useRef, ReactNode } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { TopNavBar } from '@web/src/components/layout/main/top-nav-bar';
|
|
import { navItems, notificationItems } from '@web/src/components/layout/main/nav-data';
|
|
import { Sidebar } from '@web/src/components/layout/main/side-bar';
|
|
import { Outlet } from 'react-router-dom';
|
|
|
|
|
|
export function MainLayout() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
const [notifications, setNotifications] = useState(3);
|
|
const [recentSearches] = useState([
|
|
'React Fundamentals',
|
|
'TypeScript Advanced',
|
|
'Tailwind CSS Projects',
|
|
]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<TopNavBar
|
|
sidebarOpen={sidebarOpen}
|
|
setSidebarOpen={setSidebarOpen}
|
|
notifications={notifications}
|
|
notificationItems={notificationItems}
|
|
recentSearches={recentSearches}
|
|
/>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{sidebarOpen && <Sidebar navItems={navItems} />}
|
|
</AnimatePresence>
|
|
|
|
<main
|
|
className={`pt-16 min-h-screen transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-0'
|
|
}`}
|
|
>
|
|
<Outlet></Outlet>
|
|
</main>
|
|
</div>
|
|
);
|
|
} |