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

Shared UI components lib

import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';

import type { ResolvedNavItem } from '@redocly/config';

import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
import { MobileMenuType } from '@redocly/theme/core/constants';

export const useMobileMenuLevels = () => {
  const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = useThemeHooks();
  const { versions = [] } = usePageVersions() || {};
  const activeVersion = versions.find((version) => version?.active);
  const { currentItems: sidebarItems } = useSidebarItems(activeVersion);
  const { translate } = useTranslate();
  const currentProduct = useCurrentProduct();
  const productThemeConfig = useThemeConfig();
  const location = useLocation();

  const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;
  const productNavItems = (
    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
  ) as ResolvedNavItem[];

  const menuLevels = useMemo(() => {
    const menuLevels = [
      {
        label: translate('mobileMenu.mainMenu', 'Main menu'),
        type: MobileMenuType.MAIN_MENU,
      },
    ];

    if (currentProduct && productNavItems.length) {
      menuLevels.push({
        label: currentProduct.name,
        type: MobileMenuType.PRODUCT,
      });
    }

    if (sidebarItems.length || activeVersion) {
      menuLevels.push({
        label: translate('mobileMenu.previous', 'Previous'),
        type: MobileMenuType.PAGE,
      });
    }
    return menuLevels;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  return menuLevels;
};