export default function NavbarLayout()

in src/theme/Navbar/Layout/index.tsx [25:73]
46 lines of code
5 McCabe index (conditional complexity)

export default function NavbarLayout({ children }: Props): JSX.Element {
  const {
    navbar: { hideOnScroll, style },
  } = useThemeConfig();
  const mobileSidebar = useNavbarMobileSidebar();
  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
  const config = useThemeConfig();

  const logoObj = config.navbar.logo as typeof config.navbar.logo & {
    backSrc?: string;
  };

  if (logoObj.backSrc) {
    logoObj.src = logoObj.backSrc;
  }
  if (useIsBaseUrl()) {
    logoObj.backSrc = logoObj.src;
    logoObj.src = logoObj.srcDark;
  }

  return (
    <nav
      ref={navbarRef}
      aria-label={translate({
        id: "theme.NavBar.navAriaLabel",
        message: "Main",
        description: "The ARIA label for the main navigation",
      })}
      className={clsx(
        "navbar",
        "navbar--fixed-top",
        hideOnScroll && [
          styles.navbarHideable,
          !isNavbarVisible && styles.navbarHidden,
        ],
        {
          "navbar--dark": style === "dark",
          "navbar--primary": style === "primary",
          "navbar-sidebar--show": mobileSidebar.shown,
          "navbar-home-lighting": useIsBaseUrl(),
        }
      )}
    >
      {children}
      <NavbarBackdrop onClick={mobileSidebar.toggle} />
      <NavbarMobileSidebar />
    </nav>
  );
}