// title: Mail layout with collapsible nav and saved sizes "use client"; import { InboxIcon, SendIcon, StarIcon } from "lucide-react"; import { useDefaultLayout } from "react-resizable-panels"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "@/registry/default/ui/resizable"; const NAV = [ { icon: InboxIcon, label: "Inbox" }, { icon: StarIcon, label: "Starred" }, { icon: SendIcon, label: "Sent" }, ]; const MAIL = [ { from: "Stripe", subject: "Your October invoice" }, { from: "Maya Patel", subject: "Re: retry backoff" }, { from: "GitHub", subject: "[cnippet/ui] PR #482 merged" }, ]; export default function Particle() { // Saves the sizes to localStorage, so a reload keeps the layout. const { defaultLayout, onLayoutChanged } = useDefaultLayout({ id: "v-resizable-4", storage: typeof window === "undefined" ? undefined : localStorage, }); return (

{m.from}

{m.subject}

Re: retry backoff

Capping at 30s works. Drag the nav past its minimum to collapse it to icons; the sizes survive a reload.

); }