Nav Drawer

import { NavDrawer, NavDrawerHeader, NavDrawerContent } from "@/components/ui/nav-drawer";

export default function Example() {
  return <NavDrawer />;
}

"use client";

import { forwardRef, useEffect } from "react";
import { cn } from "@/lib/utils";

const NavDrawer = forwardRef(({ className, open, onClose, side = "left", children, ...props }, ref) => {
  useEffect(() => {
    if (open) { document.body.style.overflow = "hidden"; }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      {open && <div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" onClick={onClose} />}
      <div ref={ref}
        className={cn("fixed top-0 z-50 flex h-full w-72 flex-col border bg-background transition-transform duration-300 ease-in-out",
          side === "left" && "left-0",
          side === "right" && "right-0",
          side === "left" && (open ? "translate-x-0" : "-translate-x-full"),
          side === "right" && (open ? "translate-x-0" : "translate-x-full"),
          className
        )}
        {...props}
      >
        {children}
      </div>
    </>
  );
});
NavDrawer.displayName = "NavDrawer";

const NavDrawerHeader = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex h-16 items-center justify-between border-b px-4", className)} {...props} />
));
NavDrawerHeader.displayName = "NavDrawerHeader";

const NavDrawerContent = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex-1 overflow-auto p-4", className)} {...props} />
));
NavDrawerContent.displayName = "NavDrawerContent";

export { NavDrawer, NavDrawerHeader, NavDrawerContent };