'use client'
import { useState } from 'react'
import { Menu } from 'lucide-react'
import { Sheet, SheetContent, SheetTrigger } from '@ampless/runtime/ui'
interface Props {
/** Sidebar content — typically ``. */
children: React.ReactNode
/** Label on the toggle button (mobile only). */
label?: string
className?: string
}
/**
* Wraps a sidebar so it slides in from the left as a Sheet drawer on
* small screens, and renders inline / sticky at `lg` and above. The
* wrapped content can still be a server component (passed as children
* and rendered as-is); only the open/closed toggle lives client-side.
*
* The children render twice — once inline (visible only at lg+) and
* once inside the Sheet (mounted only when open, portaled to body) —
* which is fine because they're already-evaluated React elements with
* no per-instance state of their own.
*/
export function CollapsibleSidebar({ children, label = 'Menu', className }: Props) {
const [open, setOpen] = useState(false)
return (
{label}
{
// SiteSidebar is a server component, so we can't wrap each
// Link in . Detect anchor clicks via delegation
// instead and close the sheet on navigation.
if ((e.target as HTMLElement).closest('a')) setOpen(false)
}}
>
{children}
{children}
)
}