@redocly/theme 0.17.1 → 0.18.1

package/lib/I18n/LanguagePicker.js

@@ -1,45 +1,17 @@
 "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.LanguagePicker = void 0;
-const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../mocks/utils");
 const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const hooks_1 = require("../mocks/hooks");
-const hooks_2 = require("../hooks");
+const Select_1 = require("../components/Select");
 const LanguagePicker = (props) => {
     const { currentLocale, locales, defaultLocale } = (0, hooks_1.useI18nConfig)();
-    const dropdownRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    (0, hooks_2.useOutsideClick)(dropdownRef, () => setIsOpen(false));
-    const location = (0, react_router_dom_1.useLocation)();
     const history = (0, usePreloadHistory_1.usePreloadHistory)();
     if (locales.length < 2) {
         return null;
@@ -48,69 +20,65 @@ const LanguagePicker = (props) => {
     if (!locale) {
         return null;
     }
-    return (react_1.default.createElement(Dropdown, { "data-component-name": "I18n/LanguagePicker", ref: dropdownRef, isOpen: isOpen, onClick: () => setIsOpen(!isOpen), onBlur: () => setIsOpen(false) },
-        react_1.default.createElement(DropdownValue, { role: "link" }, locale.name || locale.code),
-        react_1.default.createElement(DropdownMenu, null, locales.map((locale) => (react_1.default.createElement(MenuItem, { onClick: () => {
-                const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
-                const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
-                history.push(newUrlWithLanguage);
-                props.onChangeLanguage(locale.code);
-            }, key: locale.code, role: "link" }, locale.name || locale.code || ''))))));
+    const selected = locale.name || locale.code;
+    const languageItems = locales.map((locale) => (react_1.default.createElement(LanguageItem, { onClick: () => {
+            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+            const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+            history.push(newUrlWithLanguage);
+            props.onChangeLanguage(locale.code);
+        }, key: locale.code, role: "link" }, locale.name || locale.code || '')));
+    return react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover" });
 };
 exports.LanguagePicker = LanguagePicker;
-const Dropdown = styled_components_1.default.div `
-  font-size: var(--profile-menu-item-font-size);
-  font-family: var(--profile-menu-item-font-family);
-  font-weight: var(--profile-menu-item-font-weight);
-  line-height: var(--profile-menu-item-line-height);
+const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'I18n/LanguagePicker',
+    },
+})) `
+  display: none;
+  font-size: var(--language-picker-font-size);
+  font-weight: var(--language-picker-font-weight);
+  line-height: var(--language-picker-line-height);
+  border-radius: var(--language-picker-border-radius);
+  color: var(--language-picker-text-color);
+
+  ${Select_1.SelectInput} {
+    color: var(--navbar-text-color);
+    border-radius: var(--language-picker-input-border-radius);
+    padding: var(--language-picker-input-padding-vertical)
+      var(--language-picker-input-padding-horizontal);
+  }
 
-  ${(props) => props.isOpen
-    ? `
-    ${DropdownMenu} {
-      display: block;
-      z-index: var(--z-index-popover);
+  ${Select_1.SelectList} {
+    min-width: var(--language-picker-list-min-width);
+    max-width: var(--language-picker-list-max-width);
+    padding: var(--language-picker-list-padding);
+    background-color: var(--language-picker-list-background-color);
+    border-radius: var(--language-picker-list-border-radius);
+    box-shadow: var(--language-picker-list-box-shadow);
+  }
+
+  ${Select_1.SelectListItem} {
+    border-radius: var(--language-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--language-picker-list-item-vertical-padding)
+        var(--language-picker-list-item-horizontal-padding);
     }
-  `
-    : ``}
-`;
-const DropdownValue = styled_components_1.default.div `
-  cursor: pointer;
-  display: block;
 
-  color: var(--navbar-text-color);
-  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
-  border-radius: var(--navbar-item-border-radius);
+    :hover {
+      background-color: var(--language-picker-list-item-active-background-color);
+    }
+  }
 
-  &:hover {
-    color: var(--navbar-item-hover-text-color);
-    text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--navbar-item-hover-background-color);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
   }
-`;
-const DropdownMenu = styled_components_1.default.ul `
-  position: absolute;
-  color: var(--profile-menu-item-text-color);
-  background-color: var(--profile-menu-background-color);
-  top: var(--navbar-height);
-  margin: 0;
-  box-shadow: 0 1px 2px rgb(204, 204, 204);
-  border-radius: 0 1px 2px 2px;
-  overflow: hidden;
-  display: none;
-  overflow-y: auto;
-  z-index: var(--z-index-surface);
-  padding: 0;
-  list-style: none;
-`;
-const MenuItem = styled_components_1.default.li `
-  padding: 10px;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
 
-  &:hover {
-    color: var(--profile-menu-item-hover-text-color);
-    text-decoration: var(--profile-menu-item-hover-text-decoration);
-    background: var(--profile-menu-item-hover-background-color);
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
+const LanguageItem = styled_components_1.default.div ``;
 //# sourceMappingURL=LanguagePicker.js.map

package/lib/components/Catalog/Catalog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CatalogConfig } from '../../types/portal/src/shared/types/catalog';
+import type { CatalogConfig } from '../../config';
 export default function Catalog(props: {
     pageProps: {
         catalogId: string;

package/lib/components/Catalog/useCatalog.d.ts

@@ -1,3 +1,4 @@
 import type { ResolvedNavItem } from '../../types/portal';
-import type { CatalogConfig, FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
+import type { FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
+import type { CatalogConfig } from '../../config';
 export declare function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface DropdownProps {
+    children: React.ReactNode;
+    items: JSX.Element[] | string[];
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    onChange?: (value: React.ReactNode | string) => void;
+}
+export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: DropdownProps) => JSX.Element;
+export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
+    separator?: boolean | undefined;
+}, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -0,0 +1,113 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownListItem = exports.DropdownList = exports.DropdownHeader = exports.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../hooks");
+const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, }) => {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleClick = (value) => {
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
+    return (react_1.default.createElement(DropdownContainer, Object.assign({}, dataAttributes, { "data-testid": "dropdown", className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: handleClose, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+        react_1.default.createElement(exports.DropdownHeader, null,
+            children,
+            withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
+        isOpen && (react_1.default.createElement(exports.DropdownList, null, items.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
+        })))));
+};
+exports.Dropdown = Dropdown;
+const DropdownContainer = styled_components_1.default.div `
+  position: relative;
+  font-size: var(--dropdown-font-size);
+  font-weight: var(--dropdown-font-weight);
+  line-height: var(--dropdown-line-height);
+  border-radius: var(--dropdown-border-radius);
+  color: var(--dropdown-text-color);
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--dropdown-text-color);
+  }
+`;
+exports.DropdownHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+exports.DropdownList = styled_components_1.default.ul `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 0;
+  min-width: var(--dropdown-list-min-width);
+  max-width: var(--dropdown-list-max-width);
+  padding: var(--dropdown-list-padding);
+  background-color: var(--dropdown-list-background-color);
+  border-radius: var(--dropdown-list-border-radius);
+  box-shadow: var(--dropdown-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+exports.DropdownListItem = styled_components_1.default.li `
+  border-radius: var(--dropdown-list-item-border-radius);
+
+  & > * {
+    padding: var(--dropdown-list-item-vertical-padding) var(--dropdown-list-item-horizontal-padding);
+  }
+
+  :hover {
+    background-color: var(--dropdown-list-item-active-background-color);
+  }
+
+  ${({ separator }) => separator &&
+    (0, styled_components_1.css) `
+      border-bottom: 1px solid var(--dropdown-list-item-separator-color);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    `}
+`;
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1 @@
+export * from '../../components/Dropdown/Dropdown';

package/lib/components/Dropdown/index.js

@@ -0,0 +1,18 @@
+"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/Dropdown/Dropdown"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Menu/MenuGroup.js

@@ -33,6 +33,7 @@ const ArrowIcon_1 = require("../../icons/ArrowIcon/ArrowIcon");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
 const hooks_1 = require("../../mocks/hooks");
 function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     const [showChildren, setShowChildren] = (0, react_1.useState)(isExpanded);
@@ -56,6 +57,7 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none' },
                 !!item.items.length && react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
+                item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
                 translate(item.labelTranslationKey, item.label))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));

package/lib/components/Menu/MenuItem.js

@@ -10,12 +10,14 @@ const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const ExternalIcon_1 = require("../../icons/ExternalIcon");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
 const hooks_1 = require("../../mocks/hooks");
 function MenuItem({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(Label, { active: item.active },
+                item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
                 translate(item.labelTranslationKey, item.label),
                 item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, { dataComponentName: "Sidebar/ExternalIcon" }) : null)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));

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

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-import type { ResolvedNavItem } from '../../types/portal';
-import type { ItemState } from '../../mocks/Sidebar/types';
-interface MobileMenuProps {
-    navItems: ResolvedNavItem[];
-    sidebarItems: ItemState[];
-    className?: string;
-}
-export declare function MobileMenu({ navItems, sidebarItems, className, }: MobileMenuProps): JSX.Element | null;
+import type { MobileMenuProps } from '../../components/Menu/types';
+export declare function MobileMenu({ className }: MobileMenuProps): JSX.Element | null;
 export declare const ControlButton: import("styled-components").StyledComponent<"li", any, {}, never>;
-export {};

package/lib/components/Menu/MobileMenu.js

@@ -30,68 +30,46 @@ exports.ControlButton = exports.MobileMenu = void 0;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
-const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
-const utils_1 = require("../../utils");
+const constants_1 = require("../../components/Menu/constants");
 const index_1 = require("../../components/Menu/index");
 const MobileUserProfile_1 = require("../../components/Navbar/MobileUserProfile");
-const utils_2 = require("../../mocks/utils");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
-var MenuLevel;
-(function (MenuLevel) {
-    MenuLevel["NAVBAR"] = "NAVBAR";
-    MenuLevel["SIDEBAR"] = "SIDEBAR";
-})(MenuLevel || (MenuLevel = {}));
-function MobileMenu({ navItems, sidebarItems, className, }) {
-    const [menuLevel, setMenuLevel] = (0, react_1.useState)(sidebarItems.length ? MenuLevel.SIDEBAR : MenuLevel.NAVBAR);
-    const { pathname, hash } = (0, react_router_dom_1.useLocation)();
-    const pathHash = pathname + hash;
-    const { defaultLocale, currentLocale, locales } = (0, hooks_1.useI18nConfig)();
-    const { translate } = (0, hooks_1.useTranslate)();
-    if ((0, utils_1.isPrimitive)(navItems) || (0, utils_1.isEmptyArray)(navItems)) {
-        return null;
-    }
-    const isItemActive = (item) => {
-        return (pathHash ===
-            (0, utils_1.withPathPrefix)((0, utils_2.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales)));
-    };
-    const mapNavbarItems = (items) => {
-        return items.map((navItem) => {
-            var _a;
-            return (Object.assign(Object.assign(Object.assign(Object.assign({}, navItem), (navItem.items && { items: mapNavbarItems(navItem.items) })), ('link' in navItem && { link: navItem.link || '/' })), { active: 'link' in navItem && isItemActive(navItem), hasActiveSubItem: !!((_a = navItem.items) === null || _a === void 0 ? void 0 : _a.find(isItemActive)) }));
-        });
-    };
-    let menuItems;
-    switch (menuLevel) {
-        case MenuLevel.SIDEBAR:
-            menuItems = sidebarItems;
-            break;
-        default:
-            menuItems = mapNavbarItems(navItems);
-    }
-    const isMenuButtonVisible = menuLevel === MenuLevel.SIDEBAR;
-    const isPreviousButtonVisible = menuLevel === MenuLevel.NAVBAR && !!sidebarItems.length;
-    const isButtonsSectionVisible = isMenuButtonVisible || isPreviousButtonVisible;
-    const translationKeys = {
-        mainMenu: 'theme.mobileMenu.mainMenu',
-        previous: 'theme.mobileMenu.previous',
-    };
+const Product_1 = require("../../components/Product/Product");
+const use_mobile_menu_levels_1 = require("../../components/Menu/hooks/use-mobile-menu-levels");
+const use_mobile_menu_items_1 = require("../../components/Menu/hooks/use-mobile-menu-items");
+function MobileMenu({ className }) {
+    var _a, _b, _c;
+    const location = (0, react_router_dom_1.useLocation)();
+    const product = (0, hooks_1.useCurrentProduct)();
+    const menuLevels = (0, use_mobile_menu_levels_1.useMobileMenuLevels)();
+    const [menuLevel, setMenuLevel] = (0, react_1.useState)(menuLevels.length - 1);
+    (0, react_1.useEffect)(() => {
+        setMenuLevel(menuLevels.length - 1);
+    }, [menuLevels, location]);
+    const menuType = ((_a = menuLevels[menuLevel]) === null || _a === void 0 ? void 0 : _a.type) || constants_1.MenuType.MAIN_MENU;
+    const menuItems = (0, use_mobile_menu_items_1.useMobileMenuItems)(menuType);
+    const prevLevelName = (_b = menuLevels[menuLevel - 1]) === null || _b === void 0 ? void 0 : _b.label;
+    const nextLevelName = (_c = menuLevels[menuLevel + 1]) === null || _c === void 0 ? void 0 : _c.label;
+    const isButtonsSectionVisible = nextLevelName || prevLevelName;
     return (react_1.default.createElement(MobileMenuWrapper, { "data-component-name": "Menu/MobileMenu", className: className },
         react_1.default.createElement(ScrollableArea, null,
-            isButtonsSectionVisible && (react_1.default.createElement(ButtonsSection, { alignRight: isPreviousButtonVisible },
-                isMenuButtonVisible && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(MenuLevel.NAVBAR) },
+            isButtonsSectionVisible && (react_1.default.createElement(ButtonsSection, { alignRight: !prevLevelName && !!nextLevelName },
+                prevLevelName && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(menuLevel - 1) },
                     react_1.default.createElement(icons_1.ArrowIcon, { direction: "left", weight: "thin" }),
-                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "left" }, translate(translationKeys.mainMenu, 'Main Menu')))),
-                isPreviousButtonVisible && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(MenuLevel.SIDEBAR) },
-                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "right" }, translate(translationKeys.previous, 'Previous')),
+                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "left" }, prevLevelName))),
+                nextLevelName && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(menuLevel + 1) },
+                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "right" }, nextLevelName),
                     react_1.default.createElement(icons_1.ArrowIcon, { direction: "right", weight: "thin" }))))),
+            menuType === constants_1.MenuType.PRODUCT && product ? (react_1.default.createElement(ProductNameWrapper, null,
+                react_1.default.createElement(Product_1.Product, { product: product }))) : null,
             react_1.default.createElement(MenuWrapper, null,
                 react_1.default.createElement(index_1.Menu, { items: menuItems, isMobile: true }))),
         react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
 }
 exports.MobileMenu = MobileMenu;
 const MobileMenuWrapper = styled_components_1.default.div `
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
   width: 100%;
   position: fixed;
   z-index: var(--z-index-raised);
@@ -106,21 +84,6 @@ const MobileMenuWrapper = styled_components_1.default.div `
   ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
-
-  ${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 ButtonsSection = styled_components_1.default.div `
   align-items: center;
@@ -130,9 +93,8 @@ const ButtonsSection = styled_components_1.default.div `
 `;
 const ScrollableArea = styled_components_1.default.div `
   padding-top: var(--mobile-menu-padding-top);
-  flex: 1;
   overflow-y: scroll;
-  margin-bottom: 140px;
+  flex-grow: 1;
 `;
 const MenuWrapper = styled_components_1.default.div `
   margin: 0 var(--mobile-menu-horizontal-margin);
@@ -176,4 +138,12 @@ const ControlButtonLabel = styled_components_1.default.span `
   ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
   ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
 `;
+const ProductNameWrapper = styled_components_1.default.div `
+  color: var(--mobile-menu-item-text-color);
+  border-radius: var(--mobile-menu-item-radius);
+  padding-left: var(--sidebar-item-padding-horizontal);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 8px 7px;
+  margin: 12px 8px 0 8px;
+`;
 //# sourceMappingURL=MobileMenu.js.map

package/lib/components/Menu/MobileMenuGroup.js

@@ -11,12 +11,14 @@ const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
 function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MobileMenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded },
                 react_1.default.createElement(LabelContainer, null,
+                    item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
                     react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
                 !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),

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

@@ -0,0 +1,5 @@
+export declare enum MenuType {
+    MAIN_MENU = "MAIN_MENU",
+    PRODUCT = "PRODUCT",
+    PAGE = "PAGE"
+}

package/lib/components/Menu/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuType = void 0;
+var MenuType;
+(function (MenuType) {
+    MenuType["MAIN_MENU"] = "MAIN_MENU";
+    MenuType["PRODUCT"] = "PRODUCT";
+    MenuType["PAGE"] = "PAGE";
+})(MenuType = exports.MenuType || (exports.MenuType = {}));
+//# sourceMappingURL=constants.js.map

package/lib/components/Menu/hooks/use-mobile-menu-items.d.ts

@@ -0,0 +1,2 @@
+import { MenuType } from '../constants';
+export declare const useMobileMenuItems: (menuType: MenuType) => import("../../Sidebar/types").ItemState[];