Drawer

import {
  Button,
  Drawer,
  DrawerClose,
  DrawerHeader,
  DrawerPanel,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export default function Particle() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <Drawer position="left">
        <DrawerTrigger render={<Button variant="outline" />}>
          Open menu
        </DrawerTrigger>
        <DrawerPopup showCloseButton variant="straight">
          <DrawerHeader>
            <DrawerTitle>Menu</DrawerTitle>
          </DrawerHeader>
          <DrawerPanel>
            <nav className="-mx-[calc(--spacing(3)-1px)] flex flex-col gap-0.5">
              <DrawerClose
                render={
                  <Button
                    className="justify-start"
                    variant="ghost"
                  />
                }
              >
                Home
              </DrawerClose>
              <DrawerClose
                render={
                  <Button
                    className="justify-start"
                    variant="ghost"
                  />
                }
              >
                Profile
              </DrawerClose>
              <DrawerClose
                render={
                  <Button
                    className="justify-start"
                    variant="ghost"
                  />
                }
              >
                Settings
              </DrawerClose>
              <DrawerClose
                render={
                  <Button
                    className="justify-start"
                    variant="ghost"
                  />
                }
              >
                Sign out
              </DrawerClose>
            </nav>
          </DrawerPanel>
        </DrawerPopup>
      </Drawer>
    </div>
  );
}