Function MobileNav

packages/dev/s2-docs/src/MobileSearchMenu.tsx:233–444

({initialTag}: {initialTag?: string})

};

function MobileNav({initialTag}: {initialTag?: string}) {
  let {pages, currentPage} = useRouter();
  let overlayTriggerState = useContext(OverlayTriggerStateContext);
  let [searchFocused, setSearchFocused] = useState(false);
  let iconFilter = useIconFilter();
  let isOpen = !!overlayTriggerState?.isOpen;

  const {
    selectedLibrary,
    setSelectedLibrary,
    orderedLibraries: libraries,
    searchValue,
    setSearchValue,
    sectionTagsForDisplay: sectionTags,
    selectedTagId: selectedSection,
    setSelectedTagId: setSelectedSection,
    handleTagSelectionChange,
    filteredIcons,
    isIconsSelected,
    selectedItems,
    getPlaceholderText
  } = useSearchMenuState({
    pages,
    currentPage,
    initialTag,
    isOpen
  });

  const filteredColors = useFilteredColors(searchValue);
  const isColorsSelected = selectedSection === 'colors';
  const isTypographySelected = selectedSection === 'typography';

  let handleSearchFocus = () => {
    setSearchFocused(true);
  };

  let handleSearchBlur = () => {
    if (searchValue === '') {
      setSearchFocused(false);
    }
  };

  let handleSearchChange = (value: string) => {
    setSearchValue(value);
    if (value === '' && !searchFocused) {
      setSearchFocused(false);
    }
  };

  // Delay closing until the page updates (or the skeleton shows).
  let lastPage = useRef(currentPage);
  useEffect(() => {
    if (currentPage !== lastPage.current && overlayTriggerState?.isOpen) {
      overlayTriggerState?.close();
    }
    lastPage.current = currentPage;
  }, [currentPage, overlayTriggerState]);