Function onOpenChange

packages/dev/s2-docs/src/MobileHeader.tsx:178–216

(isOpen: boolean)

  let [isTransitioning, setTransitioning] = useState(false);
  let renderCallback = useRef<(() => void) | null>(null);
  let onOpenChange = (isOpen: boolean) => {
    if (!document.startViewTransition) {
      setOpen(false);
      if (isOpen) {
        setWasOpen(true);
      }
      return;
    }

    // Don't transition the entire page.
    document.documentElement.style.viewTransitionName = 'none';

    // Only transition label if it is visible (scrolled to the top of the page).
    if (window.scrollY === 0 && labelRef.current && isOpen) {
      labelRef.current.style.viewTransitionName = 'search-menu-label';
    }

    let viewTransition = document.startViewTransition(() => {
      if (labelRef.current && window.scrollY === 0) {
        labelRef.current.style.viewTransitionName = !isOpen ? 'search-menu-label' : '';
      }

      // Wait until next render. Using flushSync causes flickering.
      return new Promise<void>(resolve => {
        renderCallback.current = resolve;
        setOpen(isOpen);
        setTransitioning(true);
        if (isOpen) {
          setWasOpen(true);
        }
      });
    });

    viewTransition.finished.then(() => {
      document.documentElement.style.viewTransitionName = '';
      labelRef.current!.style.viewTransitionName = '';
      setTransitioning(false);
    });
  };

  useLayoutEffect(() => {
    renderCallback.current?.();