src/layouts/AppLayout.tsx

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>
  );
}