@redocly/theme/lib/components/Navbar/NavbarItem.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.NavbarItem = NavbarItem;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
const Link_1 = require("../../components/Link/Link");
const Dropdown_1 = require("../../components/Dropdown/Dropdown");
const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
function NavbarItem({ navItem, className }) {
    const { pathname } = (0, react_router_dom_1.useLocation)();
    const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const { defaultLocale, currentLocale, locales } = useL10nConfig();
    const telemetry = useTelemetry();
    if (navItem.type !== 'link' && !navItem.items)
        return null;
    const item = navItem;
    const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
    const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
    const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }]), external: item.external, target: item.target, to: item.link },
        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
        react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
        item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
    if (navItem.items) {
        const item = navItem;
        const groupItems = item.items;
        const groupItemsComponents = groupItems.map((item, index) => {
            if (item.type !== 'link' && item.type !== 'separator')
                return null;
            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
        });
        return (react_1.default.createElement("div", { "data-component-name": "Navbar/NavbarItem" },
            react_1.default.createElement(NavbarMenuItemDropdown, { trigger: itemContent, triggerEvent: "hover" },
                react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, groupItemsComponents))));
    }
    return react_1.default.createElement("div", { "data-component-name": "Navbar/NavbarItem" }, itemContent);
}
const NavbarMenuItemDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
  --dropdown-menu-item-separator-font-size: var(--navbar-separator-font-size);
  --dropdown-menu-item-separator-text-color: var(--navbar-separator-text-color);
  --dropdown-menu-item-separator-line-height: var(--navbar-separator-line-height);
`;
const NavbarMenuItem = styled_components_1.default.li `
  display: inline-block;
  padding: var(--navbar-item-padding);
  text-align: center;
  line-height: var(--navbar-item-line-height);
  font-weight: var(--navbar-item-font-weight);

  border-radius: var(--navbar-item-border-radius);
  border-bottom: ${({ active }) => active ? 'var(--navbar-item-bottom-border-active)' : 'var(--navbar-item-bottom-border)'};

  background: ${({ active }) => active && 'var(--navbar-item-bg-color-active)'};
  color: ${({ active }) => active ? 'var(--navbar-item-text-color-active)' : 'var(--navbar-text-color)'};
  text-decoration: ${({ active }) => active ? 'var(--navbar-item-text-decoration-active)' : 'none'};

  &:hover {
    color: var(--navbar-item-text-color-hover);
    text-decoration: var(--navbar-item-text-decoration-hover);
    border-bottom: ${({ active }) => !active && 'var(--navbar-item-bottom-border-hover)'};
    background: ${({ active }) => active ? 'var(--navbar-item-bg-color-active)' : 'var(--navbar-item-bg-color-hover)'};
  }
`;
const NavbarLabel = styled_components_1.default.span `
  cursor: pointer;
  vertical-align: middle;
`;
const NavbarIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
  --icon-width: var(--navbar-item-icon-width);
  --icon-height: var(--navbar-item-icon-height);
  margin-right: var(--navbar-item-icon-margin-right);
`;
const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
  margin-left: 5px;
`;
//# sourceMappingURL=NavbarItem.js.map