Function WithNavBar

apps/site/components/withNavBar.tsx:36–99

()

);

const WithNavBar: FC = () => {
  const { navigationItems } = useSiteNavigation();
  const { theme, setTheme } = useTheme();
  const { replace } = useRouter();
  const pathname = usePathname();
  const t = useTranslations();

  const locale = useLocale();

  const changeLanguage = (locale: SimpleLocaleConfig) =>
    replace(pathname!, { locale: locale.code });

  return (
    <div>
      <SkipToContentButton>
        {t('components.common.skipToContent')}
      </SkipToContentButton>

      <WithBanner section="index" />

      <NavBar
        navItems={navigationItems.map(([, { label, link, target }]) => ({
          link,
          text: label,
          target,
        }))}
        pathname={pathname}
        as={Link}
        Logo={WithNodejsLogo}
        sidebarItemTogglerAriaLabel={t(
          'components.containers.navBar.controls.toggle'
        )}
      >
        <WithSearch />

        <ThemeToggle
          onChange={setTheme}
          currentTheme={(theme as Theme) ?? 'system'}
          ariaLabel={t('components.header.buttons.theme')}
          themeLabels={{
            system: t('components.header.buttons.themeSystem'),
            light: t('components.header.buttons.themeLightMode'),
            dark: t('components.header.buttons.themeDarkMode'),
          }}
        />

        <LanguageDropdown
          onChange={changeLanguage}
          availableLanguages={availableLocales}
          currentLanguage={locale}
          ariaLabel={t('components.common.languageDropdown.label')}
        />

        <Link
          href="https://github.com/nodejs/node"
          aria-label="Node.js Github"
          className={styles.ghIconWrapper}
        >