Upload src/layouts/AppLayout.tsx with huggingface_hub

src/layouts/AppLayout.tsx

@@ -0,0 +1,37 @@
+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="page-shell flex-1 overflow-y-auto bg-transparent relative z-10 w-full p-2 md:p-0">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}