"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface MobileDrawerItem {
  label: string;
  href?: string;
  description?: string;
  icon?: React.ReactNode;
}

export interface MobileDrawerSection {
  title?: string;
  items: MobileDrawerItem[];
}

interface MobileDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
  sections: MobileDrawerSection[];
  triggerLabel?: string;
  trigger?: React.ReactNode;
  title?: string;
  description?: string;
  footer?: React.ReactNode;
  side?: "left" | "right";
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export function MobileDrawer({
  sections,
  triggerLabel = "Open menu",
  trigger,
  title = "Menu",
  description,
  footer,
  side = "left",
  open,
  defaultOpen = false,
  onOpenChange,
  className,
  ...props
}: MobileDrawerProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;

  const updateOpen = React.useCallback(
    (nextOpen: boolean) => {
      if (!isControlled) {
        setInternalOpen(nextOpen);
      }
      onOpenChange?.(nextOpen);
    },
    [isControlled, onOpenChange]
  );

  const touchStartRef = React.useRef<{ x: number; y: number } | null>(null);
  const touchDeltaRef = React.useRef(0);

  React.useEffect(() => {
    if (!isOpen) {
      return undefined;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        updateOpen(false);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, updateOpen]);

  React.useEffect(() => {
    if (!isOpen) {
      return undefined;
    }

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [isOpen]);

  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
    const touch = event.touches[0];
    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
    touchDeltaRef.current = 0;
  };

  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {
    if (!touchStartRef.current) {
      return;
    }

    const touch = event.touches[0];
    const deltaX = touch.clientX - touchStartRef.current.x;
    const deltaY = touch.clientY - touchStartRef.current.y;

    if (Math.abs(deltaY) > Math.abs(deltaX)) {
      return;
    }

    touchDeltaRef.current = deltaX;
  };

  const handleTouchEnd = () => {
    const deltaX = touchDeltaRef.current;

    if (side === "left" && deltaX < -70) {
      updateOpen(false);
    }

    if (side === "right" && deltaX > 70) {
      updateOpen(false);
    }

    touchStartRef.current = null;
    touchDeltaRef.current = 0;
  };

  const triggerElement = React.useMemo(() => {
    if (trigger) {
      if (React.isValidElement(trigger)) {
        const triggerElement =
          trigger as React.ReactElement<{ onClick?: React.MouseEventHandler }>;
        const existingOnClick = triggerElement.props.onClick;

        return React.cloneElement(triggerElement, {
          onClick: (event: React.MouseEvent) => {
            existingOnClick?.(event);
            updateOpen(true);
          },
        });
      }

      return (
        <button
          type="button"
          onClick={() => updateOpen(true)}
          className={cn(
            "inline-flex items-center gap-2 rounded-md border border-border",
            "bg-background px-4 py-2 text-sm font-medium text-foreground",
            "transition-colors hover:bg-muted",
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          )}
        >
          {trigger}
        </button>
      );
    }

    if (!triggerLabel) {
      return null;
    }

    return (
      <button
        type="button"
        onClick={() => updateOpen(true)}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border",
          "bg-background px-4 py-2 text-sm font-medium text-foreground",
          "transition-colors hover:bg-muted",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        )}
      >
        {triggerLabel}
      </button>
    );
  }, [trigger, triggerLabel, updateOpen]);

  const drawerPosition = side === "right" ? "right-0" : "left-0";
  const drawerTranslate = side === "right" ? "translate-x-full" : "-translate-x-full";

  return (
    <div className={cn("inline-flex", className)} {...props}>
      {triggerElement}

      <div
        className={cn(
          "fixed inset-0 z-50 transition",
          isOpen ? "pointer-events-auto" : "pointer-events-none"
        )}
        aria-hidden={!isOpen}
      >
        <div
          className={cn(
            "absolute inset-0 bg-background/80 transition-opacity",
            isOpen ? "opacity-100" : "opacity-0"
          )}
          onClick={() => updateOpen(false)}
        />

        <div
          role="dialog"
          aria-modal="true"
          className={cn(
            "absolute inset-y-0 flex w-80 max-w-[85vw] flex-col",
            "border border-border bg-card",
            "transition-transform duration-200",
            drawerPosition,
            isOpen ? "translate-x-0" : drawerTranslate
          )}
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
        >
          <div className="flex items-start justify-between border-b border-border px-5 py-4">
            <div className="space-y-1">
              <h2 className="text-base font-semibold text-foreground">
                {title}
              </h2>
              {description ? (
                <p className="text-sm text-muted-foreground">{description}</p>
              ) : null}
            </div>
            <button
              type="button"
              onClick={() => updateOpen(false)}
              className={cn(
                "rounded-md px-2 py-1 text-sm text-muted-foreground",
                "transition-colors hover:bg-muted hover:text-foreground",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              )}
            >
              Close
            </button>
          </div>

          <div className="flex-1 space-y-6 overflow-y-auto px-5 py-4">
            {sections.map((section, sectionIndex) => (
              <div key={`${section.title ?? "section"}-${sectionIndex}`} className="space-y-3">
                {section.title ? (
                  <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                    {section.title}
                  </p>
                ) : null}
                <div className="space-y-2">
                  {section.items.map((item) => {
                    const ItemComponent: React.ElementType = item.href
                      ? "a"
                      : "button";

                    return (
                      <ItemComponent
                        key={item.label}
                        {...(item.href
                          ? { href: item.href }
                          : { type: "button" })}
                        className={cn(
                          "flex w-full items-start gap-3 rounded-lg px-3 py-2",
                          "text-left text-sm text-foreground",
                          "transition-colors hover:bg-muted",
                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        )}
                      >
                        {item.icon ? (
                          <span className="mt-0.5 text-primary">
                            {item.icon}
                          </span>
                        ) : null}
                        <span className="space-y-1">
                          <span className="block font-medium">
                            {item.label}
                          </span>
                          {item.description ? (
                            <span className="block text-xs text-muted-foreground">
                              {item.description}
                            </span>
                          ) : null}
                        </span>
                      </ItemComponent>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>

          {footer ? (
            <div className="border-t border-border px-5 py-4">
              {footer}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}
Mobile Drawer

Dependencies

Files

Installation
