useCloseMobileMenuOnResize

Closes a mobile menu or overlay when the viewport is resized.

Menu is closed. Resize the window to close it automatically.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/use-close-mobile-menu-on-resize.json

Usage

Pass a callback that runs on every window resize event. Typical use: dismiss a sheet, drawer, or mobile nav when the user widens the viewport so the desktop layout takes over.

import { useCloseMobileMenuOnResize } from "@/hooks/use-close-mobile-menu-on-resize";

export function MobileNav({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  useCloseMobileMenuOnResize(() => onOpenChange(false));

  return open ? <nav>{/* mobile links */}</nav> : null;
}

Pair with useIsMobile when you only want to close after crossing the mobile breakpoint instead of on every resize tick.