@gravity-ui/page-constructor 5.21.0 → 5.22.0

package/build/esm/navigation/components/DesktopNavigation/DesktopNavigation.css

@@ -27,18 +27,43 @@ unpredictable css rules order in build */
   }
 }
 
+.pc-desktop-navigation__mobile-navigation.pc-desktop-navigation__mobile-navigation {
+  justify-content: flex-end;
+}
+@media (min-width: 769px) {
+  .pc-desktop-navigation__mobile-navigation.pc-desktop-navigation__mobile-navigation {
+    display: none;
+  }
+}
+
+.pc-desktop-navigation__mobile-navigation-container {
+  padding-right: 8px;
+}
+.pc-desktop-navigation__mobile-navigation-container:has(.pc-overflow-scroller__arrow) .pc-desktop-navigation__mobile-navigation {
+  justify-content: flex-start;
+}
+.pc-desktop-navigation__mobile-navigation-container:has(.pc-overflow-scroller__arrow_type_right) {
+  padding-right: 16px;
+}
 .pc-desktop-navigation__right {
-  flex: 0;
   justify-content: flex-end;
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
-.pc-desktop-navigation__navigation-container {
+@media (max-width: 768px) {
+  .pc-desktop-navigation__right {
+    flex: 3 0 0;
+    max-width: 50%;
+  }
+}
+.pc-desktop-navigation__navigation-container, .pc-desktop-navigation__mobile-navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
   justify-content: space-between;
   align-items: center;
+}
+.pc-desktop-navigation__navigation-container {
   margin-right: 32px;
 }
 .pc-desktop-navigation__button {
@@ -48,7 +73,7 @@ unpredictable css rules order in build */
   margin: 0 32px 0 0;
   cursor: pointer;
 }
-.pc-desktop-navigation__buttons, .pc-desktop-navigation__links {
+.pc-desktop-navigation__links, .pc-desktop-navigation__buttons, .pc-desktop-navigation__mobile-buttons {
   display: flex;
   align-items: center;
   margin: 0;
@@ -63,6 +88,14 @@ unpredictable css rules order in build */
 .pc-desktop-navigation__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
+@media (min-width: 769px) {
+  .pc-desktop-navigation__mobile-buttons {
+    display: none;
+  }
+}
+.pc-desktop-navigation__mobile-buttons .pc-desktop-navigation__item:not(:last-child) {
+  margin-right: 0;
+}
 .pc-desktop-navigation__links {
   position: relative;
   font-size: var(--g-text-body-2-font-size);
@@ -78,6 +111,12 @@ unpredictable css rules order in build */
   .pc-desktop-navigation__navigation-container {
     justify-content: flex-end;
   }
+  .pc-desktop-navigation__navigation-container, .pc-desktop-navigation__mobile-navigation-container {
+    justify-content: flex-end;
+  }
+  .pc-desktop-navigation__navigation-container {
+    flex: 0 0 0;
+  }
   .pc-desktop-navigation__left {
     flex: 1 0 0;
   }

package/build/esm/navigation/components/DesktopNavigation/DesktopNavigation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DesktopNavigationProps } from '../../models';
 import './DesktopNavigation.css';
-declare const DesktopNavigation: React.FC<DesktopNavigationProps>;
+export declare const DesktopNavigation: React.FC<DesktopNavigationProps>;
 export default DesktopNavigation;

package/build/esm/navigation/components/DesktopNavigation/DesktopNavigation.js

@@ -7,13 +7,16 @@ import { MobileMenuButton } from '../MobileMenuButton/MobileMenuButton';
 import { NavigationList } from '../NavigationList/NavigationList';
 import './DesktopNavigation.css';
 const b = block('desktop-navigation');
-const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (React.createElement("div", { className: b('wrapper') },
+export const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, customMobileHeaderItems, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (React.createElement("div", { className: b('wrapper') },
     logo && (React.createElement("div", { className: b('left') },
         React.createElement(Logo, Object.assign({}, logo, { className: b('logo') })))),
     React.createElement("div", { className: b('navigation-container') },
         React.createElement(OverflowScroller, { className: b('navigation'), onScrollStart: onActiveItemChange },
             React.createElement(NavigationList, { items: leftItemsWithIconSize, onActiveItemChange: onActiveItemChange, className: b('links'), itemClassName: b('item'), column: ItemColumnName.Left, activeItemId: activeItemId, menuLayout: NavigationLayout.Desktop }))),
     React.createElement("div", { className: b('right') },
+        customMobileHeaderItems && (React.createElement("div", { className: b('mobile-navigation-container') },
+            React.createElement(OverflowScroller, { className: b('mobile-navigation'), onScrollStart: onActiveItemChange, arrowSize: 18 },
+                React.createElement(NavigationList, { items: customMobileHeaderItems, onActiveItemChange: onActiveItemChange, className: b('mobile-buttons'), itemClassName: b('item'), column: ItemColumnName.Left, activeItemId: activeItemId, menuLayout: NavigationLayout.Dropdown })))),
         React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
         rightItemsWithIconSize && (React.createElement(NavigationList, { onActiveItemChange: onActiveItemChange, column: ItemColumnName.Right, items: rightItemsWithIconSize, activeItemId: activeItemId, className: b('buttons'), itemClassName: b('item'), menuLayout: NavigationLayout.Desktop })))));
 export default DesktopNavigation;

package/build/esm/navigation/components/Logo/Logo.d.ts

@@ -5,5 +5,5 @@ export type LogoProps = ThemedNavigationLogoData & {
     className?: string;
     alt?: string;
 };
-declare const Logo: React.FC<LogoProps>;
+export declare const Logo: React.FC<LogoProps>;
 export default Logo;

package/build/esm/navigation/components/Logo/Logo.js

@@ -9,7 +9,7 @@ import { block, getLinkProps, getThemedValue } from '../../../utils';
 import { i18n } from './i18n';
 import './Logo.css';
 const b = block('logo');
-const Logo = (_a) => {
+export const Logo = (_a) => {
     var { alt = i18n('image-alt') } = _a, restProps = __rest(_a, ["alt"]);
     const props = Object.assign(Object.assign({}, restProps), { alt });
     const { hostname, Link } = useContext(LocationContext);

package/build/esm/navigation/components/MobileNavigation/MobileNavigation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { MobileNavigationProps } from '../../models';
 import './MobileNavigation.css';
-declare const MobileNavigation: React.FC<MobileNavigationProps>;
+export declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

package/build/esm/navigation/components/MobileNavigation/MobileNavigation.js

@@ -8,7 +8,7 @@ import { ItemColumnName, NavigationLayout } from '../../models';
 import { NavigationList } from '../NavigationList/NavigationList';
 import './MobileNavigation.css';
 const b = block('mobile-navigation');
-const MobileNavigation = (_a) => {
+export const MobileNavigation = (_a) => {
     var { isOpened, topItems, bottomItems } = _a, props = __rest(_a, ["isOpened", "topItems", "bottomItems"]);
     const [isMounted, setIsMounted] = React.useState(false);
     useMount(() => setIsMounted(true));

package/build/esm/navigation/components/Navigation/Navigation.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
 import './Navigation.css';
-export interface NavigationProps extends ClassNameProps {
+export interface NavigationComponentProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }
-export declare const Navigation: React.FC<NavigationProps>;
+export declare const Navigation: React.FC<NavigationComponentProps>;
 export default Navigation;

package/build/esm/navigation/components/Navigation/Navigation.js

@@ -1,42 +1,23 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useState } from 'react';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import { Col, Grid, Row } from '../../../grid';
 import { block } from '../../../utils';
-import { getNavigationItemWithIconSize } from '../../utils';
+import { useActiveNavItem, useShowBorder } from '../../hooks';
 import DesktopNavigation from '../DesktopNavigation/DesktopNavigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import './Navigation.css';
 const b = block('navigation');
 export const Navigation = ({ data, logo, className }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
+    const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemId, setActiveItemId] = useState(undefined);
-    const [showBorder, setShowBorder] = useState(withBorder);
-    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
-    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
-    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
-    const onActiveItemChange = (id) => {
-        setActiveItemId(id);
-    };
+    const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
+    const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = useActiveNavItem(iconSize, leftItems, rightItems);
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
-    useEffect(() => {
-        if (!withBorderOnScroll)
-            return () => { };
-        const showBorderOnScroll = () => {
-            if (!withBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        const scrollHandler = debounce(showBorderOnScroll, 20);
-        window.addEventListener('scroll', scrollHandler, { passive: true });
-        return () => window.removeEventListener('scroll', scrollHandler);
-    });
     return (React.createElement(Grid, { className: b({ 'with-border': showBorder }, className) },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("nav", null,
-                    React.createElement(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                    React.createElement(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
                     React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         React.createElement(MobileNavigation, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })))))));
 };

package/build/esm/navigation/components/NavigationItem/NavigationItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { NavigationItemProps } from '../../models';
 import './NavigationItem.css';
-declare const NavigationItem: React.FC<NavigationItemProps>;
+export declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -9,7 +9,7 @@ import './NavigationItem.css';
 const b = block('navigation-item');
 const ANALYTICS_ID = 'navigation';
 const nonComplexNavigationItemTypes = NavigationItemTypes.filter((type) => type !== NavigationItemType.Dropdown);
-const NavigationItem = (_a) => {
+export const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
     const navItemMap = useNavigationItemMap();

package/build/esm/navigation/components/NavigationItem/hooks/useNavigationItemMap.d.ts

@@ -1,7 +1,7 @@
 export declare const useNavigationItemMap: () => {
-    button: import("react").FC<Pick<import("../../../models").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
-    social: import("react").FC<import("../../SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
-    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../../models").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
-    link: import("react").FC<import("../../../models").NavigationItemProps & import("../../../..").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../../models").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
+    button: import("react").FC<Pick<import("../../..").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
+    social: import("react").FC<import("../../..").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../..").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("../../..").NavigationItemProps & import("../../../..").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../..").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
 };

package/build/esm/navigation/components/NavigationListItem/NavigationListItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { NavigationListItemProps } from '../../models';
-declare const NavigationListItem: React.FC<NavigationListItemProps>;
+export declare const NavigationListItem: React.FC<NavigationListItemProps>;
 export default NavigationListItem;

package/build/esm/navigation/components/NavigationListItem/NavigationListItem.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React from 'react';
 import { getItemClickHandler } from '../../utils';
 import NavigationItem from '../NavigationItem';
-const NavigationListItem = (_a) => {
+export const NavigationListItem = (_a) => {
     var { column, index, activeItemId, onActiveItemChange } = _a, props = __rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;

package/build/esm/navigation/components/Standalone/index.d.ts

@@ -1,3 +1,3 @@
-import { NavigationProps } from './../../components/Navigation/Navigation';
-declare const Standalone: (props: NavigationProps) => JSX.Element;
+import { NavigationComponentProps } from './../../components/Navigation/Navigation';
+declare const Standalone: (props: NavigationComponentProps) => JSX.Element;
 export default Standalone;

package/build/esm/navigation/containers/Layout/Layout.js

@@ -4,6 +4,7 @@ import Navigation from '../../components/Navigation/Navigation';
 import './Layout.css';
 const b = block('layout');
 const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
-    navigation && (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') })),
+    navigation &&
+        (navigation.renderNavigation ? (navigation.renderNavigation()) : (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') }))),
     React.createElement("main", { className: b('content') }, children)));
 export default Layout;

package/build/esm/navigation/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/useActiveNavItem.d.ts

@@ -0,0 +1,26 @@
+import { NavigationItemModel } from '../../models';
+declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemModel[], rightItems?: NavigationItemModel[]) => {
+    activeItemId: string | undefined;
+    leftItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[];
+    rightItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[] | undefined;
+    onActiveItemChange: (id?: string) => void;
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useActiveNavItem.js

@@ -0,0 +1,13 @@
+import { useMemo, useState } from 'react';
+import { getNavigationItemWithIconSize } from '../utils';
+const useActiveNavItem = (iconSize, leftItems, rightItems) => {
+    const [activeItemId, setActiveItemId] = useState(undefined);
+    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
+    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    return { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange };
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useShowBorder.d.ts

@@ -0,0 +1,2 @@
+declare const useShowBorder: (withBorder: boolean, withBorderOnScroll: boolean) => boolean[];
+export default useShowBorder;

package/build/esm/navigation/hooks/useShowBorder.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { debounce } from 'lodash';
+const useShowBorder = (withBorder, withBorderOnScroll) => {
+    const [showBorder, setShowBorder] = useState(withBorder);
+    useEffect(() => {
+        if (!withBorderOnScroll)
+            return () => { };
+        const showBorderOnScroll = () => {
+            if (!withBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = debounce(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return [showBorder];
+};
+export default useShowBorder;

package/build/esm/navigation/index.d.ts

@@ -1 +1,15 @@
+export * from './components/Navigation/Navigation';
+export * from './components/DesktopNavigation/DesktopNavigation';
+export * from './components/MobileNavigation/MobileNavigation';
+export * from './components/MobileMenuButton/MobileMenuButton';
+export * from './components/NavigationList/NavigationList';
+export * from './components/NavigationListItem/NavigationListItem';
+export * from './components/NavigationItem/';
+export * from './components/NavigationItem/NavigationItem';
+export * from './components/NavigationPopup/NavigationPopup';
+export * from './components/SocialIcon/SocialIcon';
+export * from './components/Logo/Logo';
+export * from './hooks';
+export * from './models';
+export * from './utils';
 export { default as Navigation } from './components/Standalone';

package/build/esm/navigation/index.js

@@ -1 +1,15 @@
+export * from './components/Navigation/Navigation';
+export * from './components/DesktopNavigation/DesktopNavigation';
+export * from './components/MobileNavigation/MobileNavigation';
+export * from './components/MobileMenuButton/MobileMenuButton';
+export * from './components/NavigationList/NavigationList';
+export * from './components/NavigationListItem/NavigationListItem';
+export * from './components/NavigationItem/';
+export * from './components/NavigationItem/NavigationItem';
+export * from './components/NavigationPopup/NavigationPopup';
+export * from './components/SocialIcon/SocialIcon';
+export * from './components/Logo/Logo';
+export * from './hooks';
+export * from './models';
+export * from './utils';
 export { default as Navigation } from './components/Standalone';

package/build/esm/navigation/models.d.ts

@@ -44,6 +44,7 @@ export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveIte
     logo: ThemedNavigationLogoData;
     leftItemsWithIconSize: NavigationItemModel[];
     rightItemsWithIconSize?: NavigationItemModel[];
+    customMobileHeaderItems?: NavigationItemModel[];
 }
 export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
     isOpened?: boolean;

package/build/esm/sub-blocks/ImageCard/ImageCard.css

@@ -1,4 +1,4 @@
-.pc-image-card_border_shadow {
+a.pc-image-card_border_shadow, .pc-image-card_border_shadow {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
@@ -58,4 +58,37 @@ unpredictable css rules order in build */
 }
 .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
   padding-bottom: 24px;
+}
+
+a.pc-image-card {
+  color: inherit;
+  text-decoration: none;
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+a.pc-image-card:hover, a.pc-image-card:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-image-card_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+a.pc-image-card_border_line, a.pc-image-card_border_none {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_line:hover, a.pc-image-card_border_none:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_shadow:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow:hover {
+  background-color: var(--pc-color-base-float-hover);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.21.0",
+  "version": "5.22.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/navigation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ThemeSupporting } from '../utils';
 import { ButtonProps, ImageProps } from './constructor-items';
 export declare enum NavigationItemType {
@@ -69,6 +70,12 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    /**
+     * Items for the navigation header on mobile devices.
+     * They are located to the right of the Logo and to the left of the MobileMenuButton.
+     * @type {NavigationItemModel[]}
+     */
+    customMobileHeaderItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
     withBorderOnScroll?: boolean;
@@ -90,4 +97,5 @@ export interface NavigationData {
     logo: ThemedNavigationLogoData;
     header: HeaderData;
     footer?: FooterData;
+    renderNavigation?: () => React.ReactNode;
 }