@redocly/theme/lib/components/Navbar/Navbar.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navbar = Navbar;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const NavbarLogo_1 = require("../../components/Navbar/NavbarLogo");
const NavbarMenu_1 = require("../../components/Navbar/NavbarMenu");
const MenuMobile_1 = require("../../components/Menu/MenuMobile");
const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
const Search_1 = require("../../components/Search/Search");
const UserMenu_1 = require("../../components/UserMenu/UserMenu");
const LanguagePicker_1 = require("../../components/LanguagePicker/LanguagePicker");
const ProductPicker_1 = require("../../components/Product/ProductPicker");
const Button_1 = require("../../components/Button/Button");
const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
function Navbar({ className }) {
    var _a;
    const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);
    const themeConfig = (0, hooks_1.useThemeConfig)();
    const { useL10n, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const { changeLanguage } = useL10n();
    const otelTelemetry = useOtelTelemetry();
    const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
    const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;
    if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
        return null;
    }
    const hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
    const hideUserMenu = userMenuSettings === null || userMenuSettings === void 0 ? void 0 : userMenuSettings.hide;
    return (react_1.default.createElement(NavbarWrapper, { "data-component-name": "Navbar/Navbar", className: className },
        isOpen && react_1.default.createElement(MenuMobile_1.MenuMobile, { hideUserProfile: !!hideUserMenu }),
        react_1.default.createElement(NavbarRow, null,
            logo && react_1.default.createElement(NavbarLogo_1.NavbarLogo, { config: logo }),
            react_1.default.createElement(ProductPicker_1.ProductPicker, null),
            menu && react_1.default.createElement(NavbarMenu_1.NavbarMenu, { menuItems: menu }),
            hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, onlyIcon: true, alignment: "end" }),
            react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null),
            react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
                    ? () => {
                        closeMobileMenu();
                        otelTelemetry.send({ type: 'mobile_menu_button_close.clicked' });
                    }
                    : () => {
                        openMobileMenu();
                        otelTelemetry.send({ type: 'mobile_menu_button_open.clicked' });
                    }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null) }),
            hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
}
const NavbarWrapper = styled_components_1.default.nav `
  --text-color: var(--navbar-text-color);

  position: sticky;
  display: flex;
  top: 0;
  height: var(--navbar-height);
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  padding: var(--navbar-padding);
  border: var(--navbar-border);
  font-size: var(--navbar-font-size);
  font-family: var(--navbar-font-family);
  z-index: var(--z-index-raised);
  background: var(--navbar-bg-color);

  @media print {
    background: transparent;
    display: none;
    > :not(a, img) {
      display: none !important;
    }
    img {
      padding: 0;
      margin: 0;
    }
  }
`;
const NavbarRow = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  max-width: var(--navbar-container-max-width);

  @media screen and (min-width: ${utils_1.breakpoints.max}) {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
  }
`;
const MobileMenuButton = (0, styled_components_1.default)(Button_1.Button) `
  margin-left: 0px !important;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: none;
  }
`;
//# sourceMappingURL=Navbar.js.map