@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Menu/MenuItemSwitch.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItemSwitch = void 0;
+const react_1 = __importDefault(require("react"));
+const _theme_1 = require("../../index.js");
+const types_1 = require("../../mocks/Sidebar/types");
+const getMenuType_1 = require("../../mocks/Sidebar/getMenuType");
+const useDrilldown_1 = require("../../mocks/Sidebar/useDrilldown");
+const useMenuGroup_1 = require("../../mocks/Sidebar/useMenuGroup");
+function MenuItemSwitch(props) {
+    var _a;
+    const type = (0, getMenuType_1.getMenuType)(props.item);
+    const { Drilldown, handleBack, handleExpand, isExpanded: drilldownIsExpanded, prevActiveItem, } = (0, useDrilldown_1.useDrilldown)({
+        item: props.item,
+        activeItem: props.activeItem,
+    });
+    const { MenuGroup, handleGroupClick, isExpanded } = (0, useMenuGroup_1.useMenuGroup)(props.item);
+    switch (type) {
+        case types_1.MenuType.Separator:
+            return react_1.default.createElement(_theme_1.Separator, Object.assign({}, props));
+        case types_1.MenuType.Operation:
+            return react_1.default.createElement(_theme_1.ApiCallItem, Object.assign({}, props));
+        case types_1.MenuType.Group:
+            if (!((_a = props.item.items) === null || _a === void 0 ? void 0 : _a.length)) {
+                // Needed for OpenApi docs model items
+                return (react_1.default.createElement(MenuGroup, { item: props.item, isExpanded: false, toggleExpanded: () => { } }, props.children));
+            }
+            return (react_1.default.createElement(MenuGroup, { item: props.item, isExpanded: isExpanded, toggleExpanded: handleGroupClick }, props.children));
+        case types_1.MenuType.DrillDown:
+            return (react_1.default.createElement(Drilldown, { item: props.item, isExpanded: drilldownIsExpanded, back: handleBack, expand: handleExpand, prevActiveItem: prevActiveItem }, props.children));
+        default:
+            return react_1.default.createElement(_theme_1.MenuItem, Object.assign({}, props));
+    }
+}
+exports.MenuItemSwitch = MenuItemSwitch;
+//# sourceMappingURL=MenuItemSwitch.js.map

package/lib/components/Menu/MenuLink.d.ts

@@ -0,0 +1,4 @@
+import { Link } from '../../mocks/Link';
+export declare const MenuLink: import("styled-components").StyledComponent<typeof Link, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/components/Menu/MenuLink.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuLink = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+exports.MenuLink = (0, styled_components_1.default)(Link_1.Link).attrs(() => ({
+    'data-component-name': 'Sidebar/MenuLink',
+})) `
+  text-decoration: none;
+  color: var(--sidebar-item-text-color);
+`;
+//# sourceMappingURL=MenuLink.js.map

package/lib/components/Menu/MenuLinkItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { MenuItemProps } from '../../components/Sidebar/types';
+export declare function MenuLinkItem({ item, children, }: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuLinkItem.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuLinkItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuLink_1 = require("../../components/Menu/MenuLink");
+function MenuLinkItem({ item, children, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem" }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
+}
+exports.MenuLinkItem = MenuLinkItem;
+const Wrapper = styled_components_1.default.span ``;
+//# sourceMappingURL=MenuLinkItem.js.map

package/lib/components/Menu/index.d.ts

@@ -0,0 +1,7 @@
+export * from '../../components/Menu/Menu';
+export * from '../../components/Menu/MenuItem';
+export * from '../../components/Menu/MenuGroup';
+export * from '../../components/Menu/MenuContainer';
+export * from '../../components/Menu/MenuItemLabel';
+export * from '../../components/Menu/MenuLink';
+export * from '../../components/Menu/MenuLinkItem';

package/lib/components/Menu/index.js

@@ -0,0 +1,24 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Menu/Menu"), exports);
+__exportStar(require("../../components/Menu/MenuItem"), exports);
+__exportStar(require("../../components/Menu/MenuGroup"), exports);
+__exportStar(require("../../components/Menu/MenuContainer"), exports);
+__exportStar(require("../../components/Menu/MenuItemLabel"), exports);
+__exportStar(require("../../components/Menu/MenuLink"), exports);
+__exportStar(require("../../components/Menu/MenuLinkItem"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Navbar/MobileNavbarDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavLinkItem } from '../../types/portal';
+interface NavbarDropdownProps {
+    items: ResolvedNavLinkItem[];
+}
+export declare function MobileNavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
+export declare const MobileDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Navbar/MobileNavbarDropdown.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDropdownWrapper = exports.MobileNavbarDropdown = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function MobileNavbarDropdown({ items }) {
+    return (react_1.default.createElement(exports.MobileDropdownWrapper, { "data-component-name": "Navbar/MobileNavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
+        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))));
+}
+exports.MobileNavbarDropdown = MobileNavbarDropdown;
+exports.MobileDropdownWrapper = styled_components_1.default.div `
+  padding: 0 15px;
+  width: max-content;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    padding: 10px 0;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+  }
+`;
+//# sourceMappingURL=MobileNavbarDropdown.js.map

package/lib/components/Navbar/MobileNavbarItem.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Link } from '../../mocks/Link';
+import type { ResolvedNavItem } from '../../types/portal';
+export interface NavbarItemProps {
+    navItem: ResolvedNavItem;
+    className?: string;
+}
+export declare function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
+export declare const NavMenuItem: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const NavMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
+    expanded: boolean;
+}, never>;
+export declare const NavLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;

package/lib/components/Navbar/MobileNavbarItem.js

@@ -0,0 +1,106 @@
+"use strict";
+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.NavLink = exports.NavMenuItemWithDropdownWrapper = exports.NavMenuItem = exports.MobileNavbarItem = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const Link_1 = require("../../mocks/Link");
+const utils_1 = require("../../utils");
+const MobileNavbarDropdown_1 = require("./MobileNavbarDropdown");
+function MobileNavbarItem({ navItem, className }) {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const [expandedDropdown, setExpandedDropdown] = (0, react_1.useState)(false);
+    const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
+    if (navItem.link) {
+        const item = navItem;
+        const isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/MobileNavbarItem", className: className },
+            react_1.default.createElement(exports.NavLink, { to: item.link, active: isActive },
+                react_1.default.createElement(NavLabel, null, item.label))));
+    }
+    if (navItem.items) {
+        const item = navItem;
+        return (react_1.default.createElement(exports.NavMenuItemWithDropdownWrapper, { expanded: expandedDropdown },
+            react_1.default.createElement(exports.NavMenuItem, { active: false, onClick: toggleDropdown, "data-component-name": "Navbar/MobileNavbarItem", className: className },
+                react_1.default.createElement(NavLabel, null, item.label),
+                react_1.default.createElement(ExpandedArrow, null)),
+            react_1.default.createElement(MobileNavbarDropdown_1.MobileNavbarDropdown, { items: item.items })));
+    }
+    return null;
+}
+exports.MobileNavbarItem = MobileNavbarItem;
+const ExpandedArrow = styled_components_1.default.div `
+  width: 5px;
+  height: 5px;
+  border: 1px solid;
+  border-left: none;
+  border-top: none;
+  transition: all 0.3s ease-out;
+`;
+exports.NavMenuItem = styled_components_1.default.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--navbar-item-padding-horizontal);
+  text-align: left;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  font-weight: var(--navbar-item-font-weight);
+  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+  }
+`;
+exports.NavMenuItemWithDropdownWrapper = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+
+  ${ExpandedArrow} {
+    transform: rotate(${({ expanded }) => (expanded ? '' : '-')}45deg);
+  }
+
+  ${MobileNavbarDropdown_1.MobileDropdownWrapper} {
+    height: ${({ expanded }) => (expanded ? '100%' : '0')};
+    opacity: ${({ expanded }) => (expanded ? '1' : '0')};
+  }
+
+  ${exports.NavMenuItem} {
+    border-bottom: none;
+  }
+`;
+exports.NavLink = (0, styled_components_1.default)(Link_1.Link) `
+  color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ active }) => active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+const NavLabel = styled_components_1.default.span `
+  cursor: pointer;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=MobileNavbarItem.js.map

package/lib/components/Navbar/MobileNavbarMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ResolvedConfigLinks } from '../../types/portal';
+export declare function MobileNavbarMenu({ menuItems, closeMenu, search, }: {
+    menuItems: ResolvedConfigLinks;
+    search: React.ReactNode | undefined;
+    closeMenu: () => void;
+}): JSX.Element | null;

package/lib/components/Navbar/MobileNavbarMenu.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavbarMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
+const MobileNavbarItem_1 = require("../../components/Navbar/MobileNavbarItem");
+const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
+const utils_1 = require("../../utils");
+function MobileNavbarMenu({ menuItems, closeMenu, search, }) {
+    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
+        return null;
+    }
+    return (react_1.default.createElement(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
+        react_1.default.createElement(NavbarItemsContainer, null,
+            react_1.default.createElement(MobileSearchWrapper, null, search || null),
+            menuItems.map((navItem, index) => {
+                return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+            })),
+        react_1.default.createElement(NavbarItemsClosableArea, { onClick: closeMenu })));
+}
+exports.MobileNavbarMenu = MobileNavbarMenu;
+const NavbarItemsWrapper = styled_components_1.default.div `
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 201; //more than Search
+  left: 0;
+  top: 0;
+  overflow-x: hidden;
+  transition: 0.5s;
+  display: flex;
+  ${NavbarDropdown_1.DropdownWrapper} {
+    & > div {
+      text-align: center;
+      padding: 10px 0;
+      cursor: pointer;
+      a {
+        color: var(--navbar-text-color);
+        text-decoration: none;
+      }
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+const NavbarItemsClosableArea = styled_components_1.default.div `
+  display: flex;
+  flex: 1;
+  min-width: 50px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+`;
+const NavbarItemsContainer = styled_components_1.default.ul `
+  width: 70%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--navbar-background-color);
+
+  ${NavbarItem_1.NavbarMenuItem} {
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+    }
+    border-radius: 0;
+    padding: 1em 0;
+    width: 100%;
+  }
+
+  ${NavbarItem_1.NavbarMenuItemWithDropdownWrapper} {
+    display: block;
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+      border-radius: 0;
+    }
+    ${NavbarItem_1.NavbarMenuItem} {
+      border-bottom: none;
+    }
+  }
+
+  ${NavbarDropdown_1.DropdownWrapper} {
+    background-color: var(--navbar-background-color);
+    width: 100%;
+    padding: 0;
+    position: relative;
+  }
+`;
+const MobileSearchWrapper = styled_components_1.default.div `
+  padding: var(--navbar-item-padding-horizontal);
+  > div {
+    display: block;
+    width: 100%;
+  }
+  input {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=MobileNavbarMenu.js.map

package/lib/components/Navbar/MobileNavbarMenuButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const MobileNavbarMenuButton: import("styled-components").StyledComponent<({ onClick, className }: import("../../ui/Burger").BurgerProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/components/Navbar/MobileNavbarMenuButton.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavbarMenuButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Burger_1 = require("../../ui/Burger");
+exports.MobileNavbarMenuButton = (0, styled_components_1.default)(Burger_1.Burger).attrs(() => ({
+    'data-component-name': 'Navbar/MobileNavbarMenuButton',
+})) `
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=MobileNavbarMenuButton.js.map

package/lib/components/Navbar/Navbar.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { NavbarLogoProps } from '../../components/NavbarLogo';
+import type { ResolvedConfigLinks } from '../../types/portal';
+export declare function Navbar(): JSX.Element | null;
+interface NavbarPresentationalProps extends NavbarLogoProps {
+    menuItemsExist: boolean;
+    closeMobileMenu: () => void;
+    openMobileMenu: () => void;
+    isOpen: boolean;
+    hideSearch: boolean;
+    menu: ResolvedConfigLinks;
+    hideUserProfile: boolean | string | undefined;
+}
+export declare function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null;
+export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const NavbarRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Navbar/Navbar.js

@@ -0,0 +1,132 @@
+"use strict";
+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.NavbarRow = exports.NavbarContainer = exports.NavbarPresentational = exports.Navbar = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Navbar_1 = require("../../components/Navbar");
+const useMobileMenu_1 = require("../../hooks/useMobileMenu");
+const utils_1 = require("../../utils");
+const MobileNavbarMenuButton_1 = require("../../components/Navbar/MobileNavbarMenuButton");
+const NavbarLogo_1 = require("../../components/NavbarLogo");
+const MobileNavbarMenu_1 = require("../../components/Navbar/MobileNavbarMenu");
+const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const Search_1 = require("../../components/Search/Search");
+const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
+const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
+  #redocly_root {
+    --navbar-height: 0px !important;
+  }
+`;
+function Navbar() {
+    var _a;
+    const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)(false);
+    const themeConfig = (0, useThemeConfig_1.useThemeConfig)();
+    const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
+    const logo = themeConfig.logo;
+    const { search: searchSettings, navbar, userProfile: userProfileSettings } = themeConfig;
+    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 hideUserProfile = userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.hide;
+    if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
+        return null;
+    }
+    const openMobileMenu = () => setIsOpen(true);
+    const closeMobileMenu = () => setIsOpen(false);
+    const menuItemsExist = !(0, utils_1.isPrimitive)(menu) && !(0, utils_1.isEmptyArray)(menu);
+    if (!menu && !logo) {
+        return react_1.default.createElement(EmptyNavbarHack, null);
+    }
+    return (react_1.default.createElement(NavbarPresentational, Object.assign({}, {
+        menuItemsExist,
+        closeMobileMenu,
+        openMobileMenu,
+        isOpen,
+        hideSearch: Boolean(hideSearch),
+        menu: menu,
+        logo: logo,
+        hideUserProfile,
+    })));
+}
+exports.Navbar = Navbar;
+function NavbarPresentational(props) {
+    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, } = props;
+    return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
+        menuItemsExist && react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
+        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu, search: hideSearch ? null : react_1.default.createElement(Search_1.Search, null) })),
+        react_1.default.createElement(exports.NavbarRow, null,
+            react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
+            react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
+            hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
+            hideUserProfile ? null : react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null),
+            react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
+}
+exports.NavbarPresentational = NavbarPresentational;
+exports.NavbarContainer = styled_components_1.default.nav `
+  --text-color: var(--navbar-text-color);
+
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  font-size: 0.875rem;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  background: var(--navbar-background-color);
+  font-family: var(--navbar-item-font-family);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    font-size: 1rem;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    background: transparent;
+    display: none;
+    > :not(a, img) {
+      display: none !important;
+    }
+    img {
+      padding: 0;
+      margin: 0;
+    }
+  }
+`;
+exports.NavbarRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 100%;
+
+  max-width: var(--navbar-container-max-width);
+`;
+//# sourceMappingURL=Navbar.js.map

package/lib/components/Navbar/NavbarDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavLinkItem } from '../../types/portal';
+interface NavbarDropdownProps {
+    items: ResolvedNavLinkItem[];
+}
+export declare function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
+export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Navbar/NavbarDropdown.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownWrapper = exports.NavbarDropdown = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function NavbarDropdown({ items }) {
+    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
+        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))));
+}
+exports.NavbarDropdown = NavbarDropdown;
+exports.DropdownWrapper = styled_components_1.default.div `
+  display: none;
+  position: absolute;
+  background: var(--navbar-dropdown-background);
+  border: var(--navbar-item-border);
+  border-radius: var(--navbar-item-border-radius);
+  padding: 10px 15px;
+  width: max-content;
+  line-height: 1rem;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    text-align: left;
+    padding: 10px 0;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+    :hover {
+      text-decoration: underline;
+    }
+  }
+`;
+//# sourceMappingURL=NavbarDropdown.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Link } from '../../mocks/Link';
+import type { ResolvedNavItem } from '../../types/portal';
+export interface NavbarItemProps {
+    navItem: ResolvedNavItem;
+    className?: string;
+}
+export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
+export declare const NavbarMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavbarLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export declare const NavbarMenuItem: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;