Spaces:
Sleeping
Sleeping
File size: 3,458 Bytes
c01955c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import { Outlet } from "react-router-dom";
import { Sidebar } from "./Sidebar";
import { createContext, useContext, useState, useEffect } from "react";
import { Menu, X, Code2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { CanvasBackground } from "./CanvasBackground";
export const SidebarContext = createContext<{
isCollapsed: boolean;
setIsCollapsed: (v: boolean) => void;
isMobileOpen: boolean;
setIsMobileOpen: (v: boolean) => void;
}>({
isCollapsed: false,
setIsCollapsed: () => {},
isMobileOpen: false,
setIsMobileOpen: () => {}
});
export const useSidebar = () => useContext(SidebarContext);
export const AppLayout = () => {
const [isCollapsed, setIsCollapsed] = useState(false);
const [isMobileOpen, setIsMobileOpen] = useState(false);
// Auto-collapse on smaller screens
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 1024) {
setIsCollapsed(true);
} else {
setIsCollapsed(false);
setIsMobileOpen(false);
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<SidebarContext.Provider value={{ isCollapsed, setIsCollapsed, isMobileOpen, setIsMobileOpen }}>
<div className="flex min-h-screen text-foreground w-full overflow-x-hidden">
{/* Mobile Header */}
<header
className="lg:hidden fixed top-0 left-0 right-0 h-16 border-b border-sidebar-border z-40 flex items-center justify-between px-4"
style={{
background: "hsl(var(--sidebar-background) / 0.75)",
backdropFilter: "blur(20px)",
WebkitBackdropFilter: "blur(20px)",
}}
>
<button
onClick={() => setIsMobileOpen(true)}
className="p-2 hover:bg-sidebar-accent rounded-lg transition-colors"
>
<Menu className="w-6 h-6 text-sidebar-foreground" />
</button>
{/* Logo — icon + text */}
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-xl gradient-bg flex items-center justify-center shadow-md">
<Code2 className="w-4 h-4 text-white" />
</div>
<span className="font-bold text-base"><span className="text-primary">ML</span> Learner</span>
</div>
<div className="w-10"></div> {/* Spacer for symmetry */}
</header>
{/* Sidebar Overlay for Mobile */}
{isMobileOpen && (
<div
className="lg:hidden fixed inset-0 bg-black/70 z-40 transition-opacity"
onClick={() => setIsMobileOpen(false)}
/>
)}
<Sidebar />
{/* 3D WebGL Background Layer */}
<CanvasBackground />
{/* Main content shifts using margin so it never overlaps or leaves a gap */}
<main
className={cn(
"flex flex-col min-h-screen transition-all duration-300 ease-in-out relative z-10",
"pt-16 lg:pt-0", // Account for mobile header
isCollapsed ? "lg:ml-[72px] w-full lg:w-[calc(100vw-72px)]" : "lg:ml-[260px] w-full lg:w-[calc(100vw-260px)]"
)}
>
<div className="flex-1 w-full max-w-full animate-fade-in relative">
<Outlet />
</div>
</main>
</div>
</SidebarContext.Provider>
);
};
|