withNavBar.tsx

'use client';

import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
import Skeleton from '@node-core/ui-components/Common/Skeleton';
import SkipToContentButton from '@node-core/ui-components/Common/SkipToContentButton';
import NavBar from '@node-core/ui-components/Containers/NavBar';
// TODO(@AvivKeller): I don't like that we are importing styles from another module
import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
import { availableLocales } from '@node-core/website-i18n';
import classNames from 'classnames';
import dynamic from 'next/dynamic';
import { useLocale, useTranslations } from 'next-intl';
import { useTheme } from 'next-themes';

import SearchButton from '#site/components/Common/Searchbox';
import Link from '#site/components/Link';
import WithBanner from '#site/components/withBanner';
import WithNodejsLogo from '#site/components/withNodejsLogo';
import { useScrollDirection } from '#site/hooks/client';
import { useSiteNavigation } from '#site/hooks/generic';
import { useRouter, usePathname } from '#site/navigation.mjs';

import type { Theme } from '@node-core/ui-components/Common/ThemeToggle';
import type { SimpleLocaleConfig } from '@node-core/ui-components/types';
import type { FC } from 'react';

const ThemeToggle = dynamic(
  () => import('@node-core/ui-components/Common/ThemeToggle'),
  {
    ssr: false,
    loading: () => (
      <Skeleton className={styles.themeToggleSkeleton} loading={true} />
    ),
  }
);

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

  const locale = useLocale();

  const scrollDirection = useScrollDirection();

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

  return (
    <div
      className={classNames(styles.navBarWrapper, {
        [styles.hidden]: scrollDirection === 'down',
      })}
    >
      <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'
        )}
      >
        <SearchButton />

        <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}
        >
          <GitHubIcon />
        </Link>
      </NavBar>
    </div>
  );
};

export default WithNavBar;