@redocly/theme
Version:
Shared UI components lib
120 lines (117 loc) • 6.72 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 = __importStar(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");
function NavbarItem({ navItem, className }) {
const { pathname } = (0, react_router_dom_1.useLocation)();
const { useTranslate, useL10nConfig, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const { defaultLocale, currentLocale, locales } = useL10nConfig();
const otelTelemetry = useOtelTelemetry();
if (navItem.type !== 'link' && !navItem.items)
return null;
const item = navItem;
const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
const isActive = pathname ===
(0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => otelTelemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
react_1.default.createElement(NavbarIcon, { url: item.icon }),
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, { url: item.icon }),
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 = styled_components_1.default.i `
${({ url }) => url &&
(0, styled_components_1.css) `
background-image: url('${url}');
width: var(--navbar-item-icon-width);
height: var(--navbar-item-icon-height);
display: inline-block;
background-size: contain;
margin-right: var(--navbar-item-icon-margin-right);
vertical-align: middle;
background-position: center;
background-repeat: no-repeat;
`}
`;
const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
margin-left: 5px;
`;
//# sourceMappingURL=NavbarItem.js.map