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

Shared UI components lib

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';
import {
  buildLanguagesGroup,
  buildVersionSection,
  mapNavbarItems,
} from '@redocly/theme/core/utils';

const MENU_SEPARATOR: ResolvedNavItem = {
  type: 'separator',
  separatorLine: true,
};

export const useMobileMenuItems = (menuType: MobileMenuType) => {
  const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
    useThemeHooks();
  const { versions = [] } = usePageVersions() || {};
  const { defaultLocale, currentLocale, locales } = useL10nConfig();
  const { translate } = useTranslate();
  const activeVersion = versions.find((version) => version.active);
  const {
    currentItems: sidebarItems,
    pushDrilldownState,
    popDrilldownState,
    backLink,
  } = useSidebarItems(activeVersion);
  const location = useLocation();

  const currentProduct = useCurrentProduct();
  const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;

  const productThemeConfig = useThemeConfig();
  const baseThemeConfig = useThemeConfig(false);

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

  const menuItems: ResolvedNavItem[] = [];

  if (menuType === MobileMenuType.PAGE) {
    if (activeVersion) {
      // TODO: consider to refactor
      const versionsSection = buildVersionSection(translate, versions, activeVersion);
      menuItems.push(...versionsSection);
    }
    if (menuItems.length && sidebarItems.length) {
      menuItems.push(MENU_SEPARATOR);
    }
    menuItems.push(...(sidebarItems as ResolvedNavItem[]));
  } else if (menuType === MobileMenuType.PRODUCT) {
    menuItems.push(...productNavItems);

    if (menuItems.length && baseNavItems.length) {
      menuItems.push(MENU_SEPARATOR);
    }

    if (baseNavItems.length) {
      menuItems.push(...baseNavItems);
    }
  } else if (menuType === MobileMenuType.MAIN_MENU) {
    const productMenuItems: ResolvedNavItem[] = Object.values(baseThemeConfig.products || {}).map(
      (product) => ({
        label: product.name,
        link: product.link,
        icon: product.icon,
        type: 'link',
      }),
    );

    if (productMenuItems.length) {
      menuItems.push({
        type: 'separator',
        label: translate('mobileMenu.products', 'Products'),
      });

      menuItems.push(...productMenuItems);
    }

    if (menuItems.length && baseNavItems.length) {
      menuItems.push(MENU_SEPARATOR);
    }

    if (baseNavItems.length) {
      menuItems.push(...baseNavItems);
    }
  }

  const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);

  if (menuItems.length && languagesMenu) {
    menuItems.push(MENU_SEPARATOR);
  }

  if (languagesMenu) {
    menuItems.push(languagesMenu);
  }

  return {
    items: mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
    popDrilldownState,
    pushDrilldownState,
    backLink,
  };
};