Function MobileHeader

packages/dev/s2-docs/src/MobileHeader.tsx:139–377

({toc})

}

export function MobileHeader({toc}) {
  let ref = useRef<HTMLDivElement | null>(null);
  let linkRef = useRef<HTMLAnchorElement | null>(null);
  let labelRef = useRef<HTMLSpanElement | null>(null);
  let {colorScheme} = useSettings();

  useEffect(() => {
    // Tiny polyfill for scroll driven animations.
    // Element must have animationDuration: 1s and animationPlayState: paused.
    if (!CSS.supports('(animation-timeline: scroll())') && ref.current) {
      let [start, end] = animationRange.split(' ').map(v => parseInt(v, 10));
      let animations = ref.current.getAnimations({subtree: true});
      let onScroll = () => {
        // Calculate animation time based on percentage of animationRange * duration.
        let time = Math.max(0, Math.min(end, window.scrollY - start) / (end - start)) * 1000;
        for (let animation of animations) {
          animation.currentTime = time;
        }
      };

      window.addEventListener('scroll', onScroll, {passive: true});
      return () => window.removeEventListener('scroll', onScroll);
    }
  }, []);

  let {currentPage} = useRouter();
  let library = getLibraryFromPage(currentPage);
  let icon = getLibraryIcon(library);
  let subdirectory: 's2' | 'react-aria' = 's2';
  if (library === 'react-aria') {
    // the internationalized library has no homepage so i've chosen to route it to the react aria homepage
    subdirectory = 'react-aria';
  }

  let baseUrl = getBaseUrl(subdirectory);
  let homepage = `${baseUrl}/`;

  let [isOpen, setOpen] = useState(false);
  let [wasOpen, setWasOpen] = useState(isOpen);
  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';
    }