@redocly/theme/src/core/hooks/use-mobile-menu.ts

Shared UI components lib

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

import { useModalScrollLock } from './use-modal-scroll-lock';

export function useMobileMenu(initialState = false) {
  const location = useLocation();
  const [isOpen, setIsOpen] = useState(initialState);

  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
  useModalScrollLock(isOpen);

  const openMobileMenu = () => setIsOpen(true);
  const closeMobileMenu = () => setIsOpen(false);

  return { isOpen, openMobileMenu, closeMobileMenu };
}