@redocly/theme 0.15.1 → 0.17.0

package/lib/components/Markdown/Mermaid.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }) {
-    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
+const utils_1 = require("../../utils");
+function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
+    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
 }
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Markdown/PageWrapper.d.ts

@@ -1,3 +1 @@
-export declare const PageWrapper: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const PageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Markdown/PageWrapper.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.PageWrapper = styled_components_1.default.div.attrs(() => ({
+exports.PageWrapper = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Markdown/PageWrapper',
+    className,
 })) `
   display: flex;
   flex: 1;

package/lib/components/Markdown/Sup.d.ts

@@ -1,2 +1,4 @@
 import type { PropsWithChildren } from 'react';
-export declare function Sup({ children }: PropsWithChildren<unknown>): JSX.Element;
+export declare function Sup({ children, className, }: PropsWithChildren<{
+    className?: string;
+}>): JSX.Element;

package/lib/components/Markdown/Sup.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sup = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Sup({ children }) {
-    return react_1.default.createElement(Wrapper, { "data-component-name": "Markdown/Sup" }, children);
+function Sup({ children, className, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Markdown/Sup", className: className }, children));
 }
 exports.Sup = Sup;
 const Wrapper = styled_components_1.default.sup ``;

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

@@ -3,8 +3,10 @@ import type { ItemState } from '../../mocks/Sidebar/types';
 export interface MenuListProps {
     items: ItemState[];
     depth?: number;
+    isMobile?: boolean;
+    className?: string;
 }
-export declare function Menu({ depth, items }: MenuListProps): JSX.Element;
+export declare function Menu({ depth, items, className, isMobile }: MenuListProps): JSX.Element;
 export declare const ThemeMenu: import("styled-components").StyledComponent<"ul", any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/components/Menu/Menu.js

@@ -7,12 +7,12 @@ exports.ThemeMenu = exports.Menu = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importDefault(require("react"));
 const MenuItemSwitch_1 = require("./MenuItemSwitch");
-function Menu({ depth = 0, items }) {
+function Menu({ depth = 0, items, className, isMobile }) {
     // TODO: provide active section via MenuContext
     const activeItem = items.find(({ active }) => active);
-    return (react_1.default.createElement(exports.ThemeMenu, null, items.map((item, index) => {
+    return (react_1.default.createElement(exports.ThemeMenu, { className: className }, items.map((item, index) => {
         var _a;
-        return (react_1.default.createElement(MenuItemSwitch_1.MenuItemSwitch, { item: item, key: `${item.pageId}-${index}`, activeItem: activeItem }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? react_1.default.createElement(Menu, { items: item.items, depth: depth + 1 }) : null));
+        return (react_1.default.createElement(MenuItemSwitch_1.MenuItemSwitch, { item: item, key: `${item.pageId}-${index}`, activeItem: activeItem, isMobile: isMobile }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(Menu, { items: item.items, depth: depth + 1, isMobile: isMobile })) : null));
     })));
 }
 exports.Menu = Menu;
@@ -23,6 +23,8 @@ exports.ThemeMenu = styled_components_1.default.ul.attrs(() => ({
   margin: 0;
   list-style: none;
   color: var(--sidebar-item-text-color);
-  position: relative;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: relative;
+  }
 `;
 //# sourceMappingURL=Menu.js.map

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

@@ -1,5 +1,6 @@
 interface MenuContainerProps {
     growContent?: boolean;
+    className?: string;
 }
 export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
 export {};

package/lib/components/Menu/MenuContainer.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent }) => ({
+exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent, className }) => ({
     'data-component-name': 'Menu/MenuContainer',
     growContent: growContent === undefined ? true : growContent,
+    className,
 })) `
   position: relative;
   overflow-y: auto;

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

@@ -4,6 +4,7 @@ interface MenuGroupProps {
     item: ItemState;
     isExpanded: boolean;
     toggleExpanded: () => void;
+    className?: string;
 }
-export declare function MenuGroup({ item, isExpanded, toggleExpanded, children, }: React.PropsWithChildren<MenuGroupProps>): JSX.Element;
+export declare function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }: React.PropsWithChildren<MenuGroupProps>): JSX.Element;
 export {};

package/lib/components/Menu/MenuGroup.js

@@ -34,7 +34,7 @@ const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const hooks_1 = require("../../mocks/hooks");
-function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
+function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     const [showChildren, setShowChildren] = (0, react_1.useState)(isExpanded);
     const timer = (0, react_1.useRef)(null);
     const { translate } = (0, hooks_1.useTranslate)();
@@ -52,10 +52,10 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
             timer.current && clearTimeout(timer.current);
         };
     }, [isExpanded]);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup" },
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: 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' },
-                react_1.default.createElement(MenuGroupArrow, { visibility: item.items.length ? 'visible' : 'hidden', direction: isExpanded ? 'down' : 'right' }),
+                !!item.items.length && react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
                 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.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { MenuItemProps } from '../../components/Sidebar/types';
-export declare function MenuItem({ item }: MenuItemProps): JSX.Element;
+export declare function MenuItem({ item, className }: MenuItemProps): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -11,15 +11,31 @@ const ExternalIcon_1 = require("../../icons/ExternalIcon");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const hooks_1 = require("../../mocks/hooks");
-function MenuItem({ item }) {
+function MenuItem({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuItem" },
+    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(MenuItemLabel_1.MenuItemLabel, { active: item.active },
+            react_1.default.createElement(Label, { active: item.active },
                 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));
 }
 exports.MenuItem = MenuItem;
 const Wrapper = styled_components_1.default.div ``;
+const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+
+  ${({ active, theme }) => active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+    }
+  `};
+`;
 //# sourceMappingURL=MenuItem.js.map

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

@@ -1,5 +1,3 @@
 export declare const MenuItemLabel: import("styled-components").StyledComponent<"li", any, {
-    'data-component-name': string;
-} & {
     active?: boolean | undefined;
-}, "data-component-name">;
+}, never>;

package/lib/components/Menu/MenuItemLabel.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItemLabel = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuItemLabel = styled_components_1.default.li.attrs(() => ({
+exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) => ({
     'data-component-name': 'Menu/MenuItemLabel',
+    className,
 })) `
   display: flex;
   align-items: center;
@@ -27,16 +28,24 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(() => ({
   );
   border-radius: var(--sidebar-item-border-radius);
 
-  ${(props) => props.active
-    ? `
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
-  `
-    : null};
+  ${({ active, theme }) => active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+      background-color: var(--sidebar-item-active-background-color);
+    }
+  `};
 
   :hover {
-    color: var(--sidebar-item-hover-color);
-    background-color: var(--sidebar-item-hover-background-color);
+    color: var(--mobile-menu-item-active-text-color);
+
+    ${({ theme }) => theme.mediaQueries.medium} {
+      color: var(--sidebar-item-hover-color);
+      background-color: var(--sidebar-item-hover-background-color);
+    }
   }
 
   :empty {

package/lib/components/Menu/MenuItemSwitch.js

@@ -10,6 +10,7 @@ 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");
+const MobileMenuGroup_1 = require("../../components/Menu/MobileMenuGroup");
 function MenuItemSwitch(props) {
     var _a;
     const type = (0, getMenuType_1.getMenuType)(props.item);
@@ -24,11 +25,12 @@ function MenuItemSwitch(props) {
         case types_1.MenuType.Operation:
             return react_1.default.createElement(_theme_1.ApiCallItem, Object.assign({}, props));
         case types_1.MenuType.Group:
+            const Group = props.isMobile ? MobileMenuGroup_1.MobileMenuGroup : MenuGroup;
             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(Group, { item: props.item, isExpanded: false, toggleExpanded: () => { } }, props.children));
             }
-            return (react_1.default.createElement(MenuGroup, { item: props.item, isExpanded: isExpanded, toggleExpanded: handleGroupClick }, props.children));
+            return (react_1.default.createElement(Group, { 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:

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

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

package/lib/components/Menu/MenuLink.js

@@ -6,8 +6,9 @@ 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(() => ({
+exports.MenuLink = (0, styled_components_1.default)(Link_1.Link).attrs(({ className }) => ({
     'data-component-name': 'Sidebar/MenuLink',
+    className,
 })) `
   text-decoration: none;
   color: var(--sidebar-item-text-color);

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

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

package/lib/components/Menu/MenuLinkItem.js

@@ -7,8 +7,8 @@ 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)));
+function MenuLinkItem({ item, children, className, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className }, 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 ``;

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

@@ -0,0 +1,11 @@
+/// <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;
+export declare const ControlButton: import("styled-components").StyledComponent<"li", any, {}, never>;
+export {};

package/lib/components/Menu/MobileMenu.js

@@ -0,0 +1,179 @@
+"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.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 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',
+    };
+    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) },
+                    react_1.default.createElement(icons_1.ExpandIcon, { direction: "left" }),
+                    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(icons_1.ExpandIcon, { direction: "right" }))))),
+            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%;
+  width: 100%;
+  position: fixed;
+  z-index: var(--z-index-raised);
+  left: 0;
+  top: var(--navbar-height);
+  overflow-x: hidden;
+  transition: 0.5s;
+  display: flex;
+  flex-direction: column;
+  background: var(--mobile-menu-background);
+
+  ${({ 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;
+  display: flex;
+  justify-content: space-between;
+  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
+`;
+const ScrollableArea = styled_components_1.default.div `
+  padding-top: var(--mobile-menu-padding-top);
+  flex: 1;
+  overflow-y: scroll;
+  margin-bottom: 140px;
+`;
+const MenuWrapper = styled_components_1.default.div `
+  margin: 0 var(--mobile-menu-horizontal-margin);
+  margin-top: var(--mobile-menu-items-margin-top);
+  line-height: 22px;
+  background: var(--mobile-menu-background);
+
+  ${index_1.MenuItemLabel} {
+    margin: 0;
+    border-radius: var(--mobile-menu-item-radius);
+    padding-left: var(--sidebar-item-padding-horizontal);
+  }
+`;
+exports.ControlButton = styled_components_1.default.li `
+  display: inline-block;
+  padding: var(--mobile-menu-control-button-padding-vertical)
+    var(--mobile-menu-control-button-padding-horizontal);
+  margin: var(--mobile-menu-control-button-margin-vertical)
+    var(--mobile-menu-control-button-margin-horizontal);
+  text-align: center;
+  font-size: var(--mobile-menu-control-button-font-size);
+  line-height: 22px;
+  font-weight: var(--mobile-menu-control-button-weight);
+  color: var(--mobile-menu-control-button-color);
+  cursor: pointer;
+
+  svg {
+    fill: var(--mobile-menu-control-button-color);
+  }
+
+  &:hover {
+    color: var(--mobile-menu-control-button-hover-color);
+
+    svg {
+      fill: var(--mobile-menu-control-button-hover-color);
+    }
+  }
+`;
+const ControlButtonLabel = styled_components_1.default.span `
+  vertical-align: middle;
+  ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
+  ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
+`;
+//# sourceMappingURL=MobileMenu.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ItemState } from '../../components/Sidebar/types';
+interface MenuGroupProps {
+    item: ItemState;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+}
+export declare function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }: React.PropsWithChildren<MenuGroupProps>): JSX.Element;
+export {};

package/lib/components/Menu/MobileMenuGroup.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileMenuGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
+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");
+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,
+                    react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
+                !!item.items.length && react_1.default.createElement(icons_1.ExpandIcon, { direction: isExpanded ? 'down' : 'right' }))),
+        react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.MobileMenuGroup = MobileMenuGroup;
+const LabelContainer = styled_components_1.default.div `
+  display: flex;
+`;
+const Label = styled_components_1.default.div ``;
+const Wrapper = styled_components_1.default.div ``;
+const MenuWrapper = styled_components_1.default.div `
+  padding-left: var(--mobile-menu-item-nested-offset);
+  overflow: hidden;
+  ${(props) => !props.isExpanded && 'max-height: 0'}
+`;
+const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  color: var(--mobile-menu-item-text-color);
+  background: var(--mobile-menu-background);
+  display: flex;
+  justify-content: space-between;
+
+  ${({ active }) => active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+  `}
+
+  ${({ expanded }) => expanded &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+  `}
+`;
+//# sourceMappingURL=MobileMenuGroup.js.map

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

@@ -5,3 +5,4 @@ export * from '../../components/Menu/MenuContainer';
 export * from '../../components/Menu/MenuItemLabel';
 export * from '../../components/Menu/MenuLink';
 export * from '../../components/Menu/MenuLinkItem';
+export * from '../../components/Menu/MobileMenuGroup';

package/lib/components/Menu/index.js

@@ -21,4 +21,5 @@ __exportStar(require("../../components/Menu/MenuContainer"), exports);
 __exportStar(require("../../components/Menu/MenuItemLabel"), exports);
 __exportStar(require("../../components/Menu/MenuLink"), exports);
 __exportStar(require("../../components/Menu/MenuLinkItem"), exports);
+__exportStar(require("../../components/Menu/MobileMenuGroup"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function BurgerButton({ isOpen, onClick, }: {
+    isOpen: boolean;
+    onClick: () => void;
+}): JSX.Element | null;

package/lib/components/Navbar/BurgerButton.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BurgerButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("../../icons");
+function BurgerButton({ isOpen, onClick, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "BurgerButton/BurgerButton", onClick: onClick }, isOpen ? react_1.default.createElement(icons_1.CloseIcon, null) : react_1.default.createElement(icons_1.BurgerIcon, null)));
+}
+exports.BurgerButton = BurgerButton;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  fill: var(--navbar-text-color);
+
+  * {
+    margin: var(--mobile-menu-burger-button-margin);
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=BurgerButton.js.map

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function MobileUserProfile(): JSX.Element;