Function HomeHeader

packages/dev/s2-docs/pages/s2/home/Header.tsx:88–278

()

}

export default function HomeHeader() {
  const [searchOpen, setSearchOpen] = useState(false);
  const searchMenuId = useId();
  let renderCallback = useRef<(() => void) | null>(null);
  let iconRef = useRef<SVGSVGElement | null>(null);
  let labelRef = useRef<HTMLDivElement | null>(null);
  let searchRef = useRef<HTMLDivElement | null>(null);

  let openSearchMenu = async () => {
    if (!document.startViewTransition) {
      setSearchOpen(prev => !prev);
      return;
    }

    // Preload SearchMenu so it is ready to render immediately.
    await preloadSearchMenu();

    // Don't transition the entire page.
    document.documentElement.style.viewTransitionName = 'none';
    if (window.scrollY === 0) {
      iconRef.current!.style.viewTransitionName = 'search-menu-icon';
      labelRef.current!.style.viewTransitionName = 'search-menu-label';
      searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
    }

    let viewTransition = document.startViewTransition(() => {
      // Wait until next render. Using flushSync causes flickering.
      return new Promise<void>(resolve => {
        iconRef.current!.style.viewTransitionName = '';
        labelRef.current!.style.viewTransitionName = '';
        searchRef.current!.style.viewTransitionName = '';
        renderCallback.current = resolve;
        setSearchOpen(prev => !prev);
      });
    });

    viewTransition.finished.then(() => {
      document.documentElement.style.viewTransitionName = '';
    });
  };

  let closeSearchMenu = () => {
    if (!document.startViewTransition) {
      setSearchOpen(false);
      return;
    }

    document.documentElement.style.viewTransitionName = 'none';
    let viewTransition = document.startViewTransition(() => {
      return new Promise<void>(resolve => {
        renderCallback.current = resolve;
        setSearchOpen(false);

        if (window.scrollY === 0) {
          iconRef.current!.style.viewTransitionName = 'search-menu-icon';
          labelRef.current!.style.viewTransitionName = 'search-menu-label';
          searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
        }