| import { Outlet } from "react-router-dom"; | |
| import { useState } from "react"; | |
| import Sidebar from "../components/Sidebar"; | |
| import TopBar from "../components/TopBar"; | |
| import GeometricBackground from "../components/GeometricBackground"; | |
| import BackgroundElements from "../components/BackgroundElements"; | |
| export default function AppLayout() { | |
| const [isSidebarOpen, setIsSidebarOpen] = useState(false); | |
| return ( | |
| <div className="flex h-screen bg-transparent text-zinc-100 overflow-hidden relative"> | |
| <GeometricBackground /> | |
| <BackgroundElements /> | |
| {/* Mobile overlay */} | |
| {isSidebarOpen && ( | |
| <div | |
| className="fixed inset-0 bg-black/60 z-30 md:hidden backdrop-blur-sm" | |
| onClick={() => setIsSidebarOpen(false)} | |
| /> | |
| )} | |
| {/* Sidebar with mobile slide transition */} | |
| <div className={`fixed inset-y-0 left-0 z-40 transform transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"}`}> | |
| <Sidebar onClose={() => setIsSidebarOpen(false)} /> | |
| </div> | |
| <div className="flex flex-col flex-1 min-w-0 overflow-hidden w-full"> | |
| <TopBar onMenuClick={() => setIsSidebarOpen(true)} /> | |
| <main className="flex-1 overflow-y-auto bg-transparent relative z-10 w-full p-2 md:p-0"> | |
| <Outlet /> | |
| </main> | |
| </div> | |
| </div> | |
| ); | |
| } | |