Navigation Components

/**
 * Main navigation bar component
 * @returns Navbar with logo, navigation items, and mobile toggle
 */
function Navbar(): ReactNode;

/**
 * Navbar layout wrapper
 * @param props - Layout props containing navbar children
 * @returns Navbar layout structure
 */
function NavbarLayout(props: NavbarLayoutProps): ReactNode;

interface NavbarLayoutProps {
  readonly children: React.ReactNode;
}

/**
 * Navbar content container
 * @returns Navbar content with navigation items
 */
function NavbarContent(): ReactNode;

/**
 * Navbar logo component
 * @returns Logo element with site branding
 */
function NavbarLogo(): ReactNode;

/**
 * Navbar color mode toggle
 * @param props - Toggle props
 * @returns Color mode toggle button or null
 */
function NavbarColorModeToggle(props: NavbarColorModeToggleProps): ReactNode | null;

interface NavbarColorModeToggleProps {
  readonly className?: string;
}

/**
 * Navbar search component
 * @param props - Search container props
 * @returns Search input wrapper
 */
function NavbarSearch(props: NavbarSearchProps): ReactNode;

interface NavbarSearchProps {
  readonly children: ReactNode;
  readonly className?: string;
}

/**
 * Mobile navigation sidebar
 * @returns Mobile sidebar with navigation menu
 */
function NavbarMobileSidebar(): ReactNode;

/**
 * Mobile sidebar layout structure
 * @param props - Layout props with header and menu sections
 * @returns Mobile sidebar layout
 */
function NavbarMobileSidebarLayout(props: MobileSidebarLayoutProps): ReactNode;

interface MobileSidebarLayoutProps {
  readonly header: ReactNode;
  readonly primaryMenu: ReactNode;
  readonly secondaryMenu: ReactNode;
}

/**
 * Mobile sidebar toggle button
 * @returns Hamburger menu button
 */
function NavbarMobileSidebarToggle(): ReactNode;

/**
 * Mobile sidebar header
 * @returns Sidebar header with logo and close button
 */
function NavbarMobileSidebarHeader(): ReactNode;

/**
 * Primary navigation menu for mobile sidebar
 * @returns Primary navigation items
 */
function NavbarMobileSidebarPrimaryMenu(): ReactNode;

/**
 * Secondary navigation menu for mobile sidebar
 * @returns Secondary navigation items
 */
function NavbarMobileSidebarSecondaryMenu(): ReactNode;

/**
 * Generic navbar item component supporting multiple types
 * @param props - Navigation item props
 * @returns Navigation item element
 */
function NavbarItem(props: NavbarItemProps): ReactNode;

type NavbarItemProps = ComponentProps<'a'> & {
  readonly position?: 'left' | 'right';
} & (
  | LinkLikeNavbarItemProps
  | DropdownNavbarItemProps
  | DocsVersionDropdownNavbarItemProps
  | LocaleDropdownNavbarItemProps
  | SearchNavbarItemProps
);

type NavbarItemType = NavbarItemProps['type'];

/**
 * Default navigation item (link)
 * @param props - Default item props
 * @returns Navigation link element
 */
function DefaultNavbarItem(props: DefaultNavbarItemProps): ReactNode;

interface DefaultNavbarItemProps {
  readonly isDropdownItem?: boolean;
  readonly className?: string;
  readonly position?: 'left' | 'right';
  readonly mobile?: boolean;
  // Link properties
  readonly label?: ReactNode;
  readonly html?: string;
  readonly to?: string;
  readonly href?: string;
  readonly activeBasePath?: string;
  readonly activeBaseRegex?: string;
  readonly exact?: boolean;
  readonly prependBaseUrlToHref?: boolean;
}

/**
 * Desktop-specific navbar item
 * @param props - Desktop item props
 * @returns Desktop navigation item
 */
function DefaultNavbarItemDesktop(props: DefaultNavbarItemProps): ReactNode;

/**
 * Mobile-specific navbar item
 * @param props - Mobile item props
 * @returns Mobile navigation item
 */
function DefaultNavbarItemMobile(props: DefaultNavbarItemProps): ReactNode;

/**
 * Dropdown navigation item with submenu
 * @param props - Dropdown item props
 * @returns Dropdown menu component
 */
function DropdownNavbarItem(props: DropdownNavbarItemProps): ReactNode;

interface DropdownNavbarItemProps {
  readonly position?: 'left' | 'right';
  readonly items: readonly LinkLikeNavbarItemProps[];
  readonly className?: string;
  readonly mobile?: boolean;
  // Base link properties
  readonly label?: ReactNode;
  readonly html?: string;
  readonly to?: string;
  readonly href?: string;
  readonly activeBasePath?: string;
  readonly activeBaseRegex?: string;
  readonly exact?: boolean;
  readonly prependBaseUrlToHref?: boolean;
  readonly isDropdownLink?: boolean;
}

/**
 * Desktop dropdown navbar item
 * @param props - Desktop dropdown props
 * @returns Desktop dropdown menu
 */
function DropdownNavbarItemDesktop(props: DropdownNavbarItemProps): ReactNode;

/**
 * Mobile dropdown navbar item
 * @param props - Mobile dropdown props
 * @returns Mobile dropdown menu
 */
function DropdownNavbarItemMobile(props: DropdownNavbarItemProps): ReactNode;

/**
 * Locale dropdown for language selection
 * @param props - Locale dropdown props
 * @returns Language selection dropdown
 */
function LocaleDropdownNavbarItem(props: LocaleDropdownNavbarItemProps): ReactNode;

interface LocaleDropdownNavbarItemProps extends DropdownNavbarItemProps {
  readonly dropdownItemsBefore: LinkLikeNavbarItemProps[];
  readonly dropdownItemsAfter: LinkLikeNavbarItemProps[];
  readonly queryString?: string;
}

/**
 * Documentation version selection dropdown
 * @param props - Version dropdown props
 * @returns Documentation version dropdown
 */
function DocsVersionDropdownNavbarItem(props: DocsVersionDropdownNavbarItemProps): ReactNode;

interface DocsVersionDropdownNavbarItemProps extends DropdownNavbarItemProps {
  readonly docsPluginId?: string;
  readonly dropdownActiveClassDisabled?: boolean;
  readonly dropdownItemsBefore: LinkLikeNavbarItemProps[];
  readonly dropdownItemsAfter: LinkLikeNavbarItemProps[];
  readonly versions?: string[] | {[version: string]: {label?: string}};
}

/**
 * Documentation version link item
 * @param props - Version link props
 * @returns Documentation version link
 */
function DocsVersionNavbarItem(props: DocsVersionNavbarItemProps): ReactNode;

interface DocsVersionNavbarItemProps extends DefaultNavbarItemProps {
  readonly docsPluginId?: string;
}

/**
 * Link to specific documentation page
 * @param props - Doc link props
 * @returns Documentation page link or null
 */
function DocNavbarItem(props: DocNavbarItemProps): ReactNode | null;

interface DocNavbarItemProps extends DefaultNavbarItemProps {
  readonly docId: string;
  readonly docsPluginId?: string;
}

/**
 * Link to documentation sidebar
 * @param props - Sidebar link props
 * @returns Documentation sidebar link
 */
function DocSidebarNavbarItem(props: DocSidebarNavbarItemProps): ReactNode;

interface DocSidebarNavbarItemProps extends DefaultNavbarItemProps {
  readonly sidebarId: string;
  readonly docsPluginId?: string;
}

/**
 * Search navbar item
 * @param props - Search item props
 * @returns Search component
 */
function SearchNavbarItem(props: SearchNavbarItemProps): ReactNode;

interface SearchNavbarItemProps {
  readonly mobile?: boolean;
  readonly className?: string;
}

/**
 * Custom HTML navbar item
 * @param props - HTML item props
 * @returns Custom HTML element
 */
function HtmlNavbarItem(props: HtmlNavbarItemProps): ReactNode;

interface HtmlNavbarItemProps extends DefaultNavbarItemProps {
  readonly value: string;
}

/**
 * Base navigation link component
 * @param props - Navigation link props
 * @returns Navigation link element
 */
function NavbarNavLink(props: NavbarNavLinkProps): ReactNode;

interface NavbarNavLinkProps {
  readonly activeBasePath?: string;
  readonly activeBaseRegex?: string;
  readonly exact?: boolean;
  readonly label?: ReactNode;
  readonly html?: string;
  readonly prependBaseUrlToHref?: boolean;
  readonly isDropdownLink?: boolean;
  // Standard link props
  readonly to?: string;
  readonly href?: string;
  readonly className?: string;
  readonly target?: string;
}

// docusaurus.config.js
export default {
  themeConfig: {
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          type: 'doc',
          docId: 'intro',
          position: 'left',
          label: 'Tutorial',
        },
        {
          type: 'dropdown',
          label: 'Community',
          position: 'left',
          items: [
            {
              label: 'Discord',
              href: 'https://discord.gg/docusaurus',
            },
            {
              label: 'Twitter',
              href: 'https://twitter.com/docusaurus',
            },
          ],
        },
        {
          type: 'localeDropdown',
          position: 'right',
        },
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
  },
};

import React from 'react';
import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';

export default function CustomNavbarItem(props) {
  return (
    <DefaultNavbarItem
      {...props}
      className={`${props.className || ''} custom-navbar-item`}
    />
  );
}