"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Home, LayoutDashboard, FolderDot, Users, Settings, LogOut, Menu, X, Sparkles } from "lucide-react"; const navItems = [ { id: "home", label: "Overview", icon: Home }, { id: "dashboard", label: "Dashboard", icon: LayoutDashboard }, { id: "projects", label: "Projects", icon: FolderDot }, { id: "team", label: "Team & Access", icon: Users }, ]; export default function MobileBottomSheetSidebar() { const [isOpen, setIsOpen] = useState(false); // Prevent scrolling inside the main app when mobile drawer is open useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } return () => { document.body.style.overflow = "unset"; }; }, [isOpen]); const handleDragEnd = (event: any, info: any) => { if (info.offset.y > 80 || info.velocity.y > 400) { setIsOpen(false); } }; return ( // Outer Container: Transparent boundary for the library viewer

{/* App Shell Wrapper Simulates the user's browser/app window. */}

{/* ========================================== DESKTOP SIDEBAR (Hidden on Mobile) ========================================== */} {/* ========================================== MAIN CONTENT AREA ========================================== */}

{/* Mobile Header with Hamburger Trigger */}

UIXTRA_OS

{/* Dummy Dashboard Content */}

Overview

Resize the window to mobile width to see the sidebar transform into a swipeable bottom sheet.

{[1, 2, 3, 4, 5, 6].map((i) => (

))}

{/* ========================================== MOBILE BOTTOM SHEET (Drawer) ========================================== */} {isOpen && ( <> {/* Backdrop */} setIsOpen(false)} className="absolute inset-0 z-40 bg-neutral-950/20 dark:bg-black/40 backdrop-blur-sm md:hidden" /> {/* Bottom Sheet Drawer */} {/* Drag Handle */}

Navigation

Settings

)}

{/* Scrollbar CSS injection for flawless internal scrolling */}