@doyourjob/gravity-ui-page-constructor-addons 2.1.34 → 2.1.36

package/build/esm/components/NewHeader/NewHeader.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   --g-color-scroll-handle: var(--g-color-base-generic);
   --g-color-scroll-handle-hover: var(--g-color-line-generic);
   width: 100%;
-  z-index: 100;
   background: var(--pc-transparent);
 }
 
@@ -13,6 +12,11 @@ unpredictable css rules order in build */
   background: var(--g-color-base-background);
 }
 
+.pc-addons-new-header_is-mobile-opened {
+  position: fixed;
+  top: 0;
+}
+
 .pc-addons-new-header__container {
   position: relative;
   width: 100%;
@@ -37,7 +41,6 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-new-header__left {
-  margin-right: 32px;
   gap: 20px;
 }
 
@@ -137,11 +140,6 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
 }
 
-.pc-addons-new-header__logo-img {
-  display: block;
-  height: 36px;
-}
-
 .pc-addons-new-header_search .pc-addons-new-header__left,
 .pc-addons-new-header_search .pc-addons-new-header__navigation,
 .pc-addons-new-header_search .pc-addons-new-header__wrap > div:not(.pc-addons-new-header__icons-container) {

package/build/esm/components/NewHeader/NewHeader.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Button as PCButton, getLinkProps, } from '@doyourjob/gravity-ui-page-constructor';
+import { Button as PCButton } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../utils/cn';
 import { NHLoginButton } from './components/NHLoginButton/NHLoginButton';
+import { NHLogo } from './components/NHLogo/NHLogo';
 import { NHMobileNavigation } from './components/NHMobileNavigation/NHMobileNavigation';
 import { NHNavigation } from './components/NHNavigation/NHNavigation';
 import { RouteChangeHandlerContext } from './contexts/route-change';
@@ -9,7 +10,7 @@ import './NewHeader.css';
 const b = block('new-header');
 export const MOBILE_ICON_SIZE = 24;
 export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset = 0, }) => {
-    const { logo, buttons, left, right, mobile, login } = data;
+    const { logo, buttons, left, right, login } = data;
     const headerRef = useRef(null);
     const [withBackground, setWithBackground] = useState(false);
     const [isSearchMode, setIsSearchMode] = useState(false);
@@ -48,11 +49,12 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
     return (React.createElement(RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
         React.createElement("header", { className: b({
                 search: isSearchMode,
-                'with-background': withBackground,
+                'is-mobile-opened': isMobileNavigationOpen,
+                'with-background': withBackground || isMobileNavigationOpen,
             }, className), ref: headerRef },
             React.createElement("div", { className: b('container') },
                 React.createElement("div", { className: b('left') },
-                    logo && (React.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, getLinkProps(logo.href || '')), logo.src && (React.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
+                    logo && React.createElement(NHLogo, { data: logo }),
                     left ? (React.createElement("div", { className: b('navigation') },
                         React.createElement(NHNavigation, { data: left, headerRef: headerRef }))) : null),
                 React.createElement("div", { className: b('right') },
@@ -62,7 +64,7 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
                         renderSearch && (React.createElement("div", { className: b('icons-container') }, renderSearch({ onActiveToggle: toggleSearch }))),
                         React.createElement("div", { className: b('buttons') },
                             showButtonsContainer &&
-                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (React.createElement(PCButton, Object.assign({}, button, { className: b('button'), size: "l", key: button.text }))))),
+                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (React.createElement(PCButton, Object.assign({}, button, { className: b('button'), size: "l", key: index }))))),
                             login && React.createElement(NHLoginButton, { data: login, headerRef: headerRef })),
-                        mobile ? (React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null))))));
+                        React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })))))));
 };

package/build/esm/components/NewHeader/components/NHBanner/NHBanner.css

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-banner {
+  color: inherit;
+  text-decoration: none;
+  grid-area: 1/3/3/4;
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  gap: 20px;
+  background: var(--nh-banner-background, transparent);
+}
+
+.pc-addons-nh-banner_border {
+  border: 1px solid var(--g-color-line-generic-solid);
+}
+
+.pc-addons-nh-banner__wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+}
+
+.pc-addons-nh-banner__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: var(--nh-banner-color, var(--g-color-text-primary));
+  font-weight: 600;
+}
+
+.pc-addons-nh-banner__description {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--nh-banner-color, var(--g-color-text-secondary));
+}
+
+.pc-addons-nh-banner__image {
+  display: block;
+  width: 86px;
+  aspect-ratio: 1;
+}

package/build/esm/components/NewHeader/components/NHBanner/NHBanner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHProductBannerData } from '../../models';
+import './NHBanner.css';
+export declare const NHBanner: ({ title, description, image, url, background, color, border, }: NHProductBannerData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHBanner/NHBanner.js

@@ -0,0 +1,13 @@
+import React, { useMemo } from 'react';
+import { Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHBanner.css';
+const b = block('nh-banner');
+export const NHBanner = ({ title, description, image, url, background, color, border, }) => {
+    const styles = useMemo(() => (Object.assign(Object.assign({}, (background ? { '--nh-banner-background': background } : {})), (color ? { '--nh-banner-color': color } : {}))), [background, color]);
+    return (React.createElement("a", Object.assign({ href: url, className: b({ border }), style: styles }, getLinkProps(url)),
+        React.createElement(Image, { className: b('image'), src: image }),
+        React.createElement("div", { className: b('wrap') },
+            React.createElement("div", { className: b('title') }, title),
+            React.createElement("div", { className: b('description') }, description))));
+};

package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css

@@ -51,119 +51,67 @@ unpredictable css rules order in build */
   gap: 24px;
 }
 
-.pc-addons-nh-default-popup__wrap {
-  display: grid;
-  gap: 24px 40px;
-  align-items: flex-start;
+.pc-addons-nh-default-popup__section_side-head {
+  flex-direction: row;
+  gap: 0;
 }
 
-.pc-addons-nh-default-popup__right {
-  width: 100%;
-  max-width: 320px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--g-color-line-generic-solid);
+.pc-addons-nh-default-popup__section-head {
   display: flex;
   flex-direction: column;
-  padding: 24px 32px;
-  gap: 20px;
+  width: 200px;
+  padding-right: 32px;
+  flex-shrink: 0;
+  gap: 2px;
 }
 
-.pc-addons-nh-default-popup__cards {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.pc-addons-nh-default-popup__wrap {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
 }
 
-.pc-addons-nh-default-popup__card {
-  color: inherit;
-  text-decoration: none;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  cursor: pointer;
-  transition: opacity 0.2s;
+.pc-addons-nh-default-popup__wrap_mode_run {
+  grid-template-columns: repeat(12, 1fr);
 }
 
-.pc-addons-nh-default-popup__card:hover {
-  opacity: 0.8;
+.pc-addons-nh-default-popup__wrap_mode_run > a {
+  grid-column: span 4;
+  grid-row: 1;
 }
 
-.pc-addons-nh-default-popup__card-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.pc-addons-nh-default-popup__wrap_mode_run > .pc-addons-nh-default-popup__inner-wrap:empty {
+  display: none;
 }
 
-.pc-addons-nh-default-popup__card-caption {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
+.pc-addons-nh-default-popup__wrap_mode_run > a + .pc-addons-nh-default-popup__inner-wrap {
+  grid-column: span 8;
 }
 
-.pc-addons-nh-default-popup__card-title {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  color: var(--g-color-text-primary);
-  font-weight: 600;
+.pc-addons-nh-default-popup__wrap_mode_run > .pc-addons-nh-default-popup__inner-wrap:last-child {
+  grid-column: span 12;
 }
 
-.pc-addons-nh-default-popup__card-description {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
+.pc-addons-nh-default-popup__inner-wrap {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.pc-addons-nh-default-popup__card-image {
-  display: block;
+.pc-addons-nh-default-popup__right {
   width: 100%;
-  aspect-ratio: 16/9;
-  object-fit: cover;
-}
-
-.pc-addons-nh-default-popup__stock {
-  position: relative;
-  padding: 20px;
+  max-width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--g-color-line-generic-solid);
   display: flex;
   flex-direction: column;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  max-height: 300px;
-}
-
-.pc-addons-nh-default-popup__stock-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.pc-addons-nh-default-popup__stock-title {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  color: var(--g-color-text-primary);
-  font-weight: 600;
-  z-index: 1;
-  margin-bottom: 4px;
-}
-
-.pc-addons-nh-default-popup__stock-value {
-  color: var(--g-color-text-primary);
-  font-size: 36px;
-  line-height: 48px;
-  font-weight: 600;
-  z-index: 1;
-  margin-top: auto;
+  padding: 24px 32px;
+  gap: 20px;
 }
 
-.pc-addons-nh-default-popup__stock-date {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
-  z-index: 1;
-  margin-top: 4px;
+.pc-addons-nh-default-popup__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }

package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js

@@ -1,32 +1,12 @@
-import React, { useContext, useMemo } from 'react';
-import { HeaderStockContext, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import React, { useMemo } from 'react';
 import { block } from '../../../../utils/cn';
+import { NHBanner } from '../NHBanner/NHBanner';
+import { NHEventCard } from '../NHEventCard/NHEventCard';
 import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import { NHStock } from '../NHStock/NHStock';
+import { NHStoryCard } from '../NHStoryCard/NHStoryCard';
 import './NHDefaultPopup.css';
 const b = block('nh-default-popup');
-const NHStoryCard = ({ title, description, image, url }) => (React.createElement("a", Object.assign({ href: url, className: b('card') }, getLinkProps(url)),
-    React.createElement(Image, { className: b('card-image'), src: image }),
-    React.createElement("div", { className: b('card-wrap') },
-        React.createElement("div", { className: b('card-title') }, title),
-        React.createElement("div", { className: b('card-description') }, description))));
-const NHEventCard = ({ title, caption, description, image, url }) => (React.createElement("a", Object.assign({ href: url, className: b('card') }, getLinkProps(url)),
-    React.createElement(Image, { className: b('card-image'), src: image }),
-    React.createElement("div", { className: b('card-wrap') },
-        React.createElement("div", { className: b('card-caption') }, caption),
-        React.createElement("div", { className: b('card-title') }, title),
-        React.createElement("div", { className: b('card-description') }, description))));
-const NHStock = ({ title, delayed, image }) => {
-    const data = useContext(HeaderStockContext);
-    if (!data.price)
-        return null;
-    return (React.createElement("div", { className: b('stock') },
-        image ? (React.createElement("img", { className: b('stock-background'), src: image, alt: "Stock background" })) : null,
-        React.createElement("div", { className: b('stock-title') }, title),
-        React.createElement("div", { className: b('stock-title') }, data.price.percent),
-        React.createElement("div", { className: b('stock-value') }, data.price.price),
-        React.createElement("div", { className: b('stock-date') }, data.price.update),
-        React.createElement("div", { className: b('stock-date') }, delayed)));
-};
 export const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorHover, }) => {
     const rootStyle = useMemo(() => maxWidth
         ? {
@@ -35,7 +15,7 @@ export const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primar
         }
         : undefined, [maxWidth]);
     const wrapsStyle = useMemo(() => sections.map((section) => ({
-        gridTemplateColumns: `repeat(${section.columns || 3}, 1fr)`,
+        gridTemplateColumns: section.mode === 'run' ? undefined : `repeat(${section.columns || 3}, 1fr)`,
     })), [sections]);
     const cards = useMemo(() => {
         if (right === null || right === void 0 ? void 0 : right.stories) {
@@ -46,12 +26,27 @@ export const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primar
         }
         return null;
     }, [right]);
+    const renderSectionContent = (section, index) => {
+        var _a, _b, _c;
+        if (section.mode === 'run') {
+            return (React.createElement("div", { className: b('wrap', { mode: 'run' }) },
+                ((_a = section.items) === null || _a === void 0 ? void 0 : _a[0]) && React.createElement(NHPopupItem, Object.assign({}, section.items[0], { column: true })),
+                React.createElement("div", { className: b('inner-wrap') }, (_b = section.items) === null || _b === void 0 ? void 0 : _b.slice(1, 4).map((item, cardIndex) => (React.createElement(NHPopupItem, Object.assign({ key: cardIndex }, item, { column: true }))))),
+                React.createElement("div", { className: b('inner-wrap') }, (_c = section.items) === null || _c === void 0 ? void 0 : _c.slice(4).map((item, cardIndex) => (React.createElement(NHPopupItem, Object.assign({ key: cardIndex }, item, { column: true })))))));
+        }
+        return (React.createElement("div", { className: b('wrap'), style: wrapsStyle[index] },
+            section.items.map((item, idx) => (React.createElement(NHPopupItem, Object.assign({ key: idx }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover })))),
+            section.mode === 'scale' && section.banner && React.createElement(NHBanner, Object.assign({}, section.banner))));
+    };
     return (React.createElement("div", { className: b(), style: rootStyle },
-        React.createElement("div", { className: b('left') }, sections.map((section, index) => (React.createElement("div", { key: index, className: b('section') },
-            section.title || section.subtitle ? (React.createElement("div", { className: b('head') },
-                React.createElement("div", { className: b('title') }, section.title),
-                React.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
-            React.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover }))))))))),
+        React.createElement("div", { className: b('left') }, sections.map((section, index) => {
+            const hasSideHead = Boolean(section.mode);
+            return (React.createElement("div", { key: index, className: b('section', { 'side-head': hasSideHead }) },
+                section.title || section.subtitle ? (React.createElement("div", { className: b(hasSideHead ? 'section-head' : 'head') },
+                    React.createElement("div", { className: b('title') }, section.title),
+                    React.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
+                renderSectionContent(section, index)));
+        })),
         right && (React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('title') }, right.title),
             cards && React.createElement("div", { className: b('cards') }, cards),

package/build/esm/components/NewHeader/components/NHEventCard/NHEventCard.css

@@ -0,0 +1,48 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-event-card {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.pc-addons-nh-event-card:hover {
+  opacity: 0.8;
+}
+
+.pc-addons-nh-event-card__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-event-card__caption {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-event-card__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: var(--g-color-text-primary);
+  font-weight: 600;
+}
+
+.pc-addons-nh-event-card__description {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-event-card__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+}

package/build/esm/components/NewHeader/components/NHEventCard/NHEventCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHEventCardData } from '../../models';
+import './NHEventCard.css';
+export declare const NHEventCard: ({ title, caption, description, image, url }: NHEventCardData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHEventCard/NHEventCard.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHEventCard.css';
+const b = block('nh-event-card');
+export const NHEventCard = ({ title, caption, description, image, url }) => (React.createElement("a", Object.assign({ href: url, className: b() }, getLinkProps(url)),
+    React.createElement(Image, { className: b('image'), src: image }),
+    React.createElement("div", { className: b('wrap') },
+        React.createElement("div", { className: b('caption') }, caption),
+        React.createElement("div", { className: b('title') }, title),
+        React.createElement("div", { className: b('description') }, description))));

package/build/esm/components/NewHeader/components/NHLogo/NHLogo.css

@@ -0,0 +1,4 @@
+.pc-addons-nh-logo__img {
+  display: block;
+  height: 36px;
+}

package/build/esm/components/NewHeader/components/NHLogo/NHLogo.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NHLogoData } from '../../models';
+import './NHLogo.css';
+export interface NHLogoProps {
+    data: NHLogoData;
+}
+export declare const NHLogo: ({ data }: NHLogoProps) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHLogo/NHLogo.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHLogo.css';
+const b = block('nh-logo');
+export const NHLogo = ({ data }) => {
+    return (React.createElement("a", Object.assign({ href: data.href, className: b() }, getLinkProps(data.href || '')), data.src && React.createElement("img", { className: b('img'), alt: data.alt, src: data.src })));
+};

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css

@@ -25,21 +25,56 @@ unpredictable css rules order in build */
   color: var(--g-color-text-complementary);
 }
 
-.pc-addons-nh-mobile-navigation__icon-icon {
-  position: relative;
-  top: 3px;
-}
-
 .pc-addons-nh-mobile-navigation__icon_hidden {
   display: none;
 }
 
-.pc-addons-nh-mobile-navigation__user {
-  margin-top: 24px;
+.pc-addons-nh-mobile-navigation__nav {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+}
+
+.pc-addons-nh-mobile-navigation__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+
+.pc-addons-nh-mobile-navigation__list > li + li {
+  border-top: 1px solid var(--g-color-line-generic);
+}
+
+.pc-addons-nh-mobile-navigation__list + .pc-addons-nh-mobile-navigation__list {
+  margin-top: 150px;
 }
 
 .pc-addons-nh-mobile-navigation__buttons {
-  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.pc-addons-nh-mobile-navigation__button {
+  width: 100%;
+}
+
+.pc-addons-nh-mobile-navigation__login-items {
+  display: flex;
+  flex-direction: column;
+  margin-top: 32px;
+}
+
+.pc-addons-nh-mobile-navigation__login-item {
+  padding: 8px 0;
+}
+
+.pc-addons-nh-mobile-navigation__login-item + .pc-addons-nh-mobile-navigation__login-item {
+  border-top: 1px solid var(--g-color-line-generic);
 }
 
 @media (max-width: 1081px) {

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts

@@ -1,15 +1,16 @@
 import React from 'react';
 import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
-import { NHMobileNavigationItemData } from '../../models';
+import { NHLoginPopupData, NHNavigationData } from '../../models';
 import './NHMobileNavigation.css';
 interface MobileNavigationProps {
     isOpened: boolean;
     toogleOpen: (isOpened: boolean) => void;
     isSearchOpen: boolean;
-    data: NHMobileNavigationItemData[];
+    data?: NHNavigationData;
     onMenuScroll: (scrollTop: number) => void;
     popupClassName?: string;
     buttons?: ButtonProps[];
+    login?: NHLoginPopupData;
 }
-export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
+export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
 export {};

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -5,17 +5,24 @@ import { Button, Icon } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
 import { NHMobileNavigationItem } from '../NHMobileNavigationItem/NHMobileNavigationItem';
 import { NHMobileNavigationPopup } from '../NHMobileNavigationPopup/NHMobileNavigationPopup';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 import './NHMobileNavigation.css';
 const b = block('nh-mobile-navigation');
-export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (React.createElement("div", { className: b() },
-    React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
-            e.stopPropagation();
-            toogleOpen(!isOpened);
-        } },
-        React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
-    React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
-        React.createElement("nav", null,
-            React.createElement("ul", { className: b() }, data.map((item) => (React.createElement("li", { className: b(), key: item.title },
-                React.createElement(NHMobileNavigationItem, Object.assign({}, item)))))),
-            buttons &&
-                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => React.createElement(PCButton, Object.assign({}, button, { size: "l", key: button.text }))))))));
+export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
+    var _a, _b;
+    return (React.createElement("div", { className: b() },
+        React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+                e.stopPropagation();
+                toogleOpen(!isOpened);
+            } },
+            React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
+        React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+            React.createElement("nav", { className: b('nav') },
+                React.createElement("ul", { className: b('list') }, (_a = data === null || data === void 0 ? void 0 : data.left) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement("li", { className: b('item'), key: index },
+                    React.createElement(NHMobileNavigationItem, { item: item }))))),
+                React.createElement("ul", { className: b('list') }, (_b = data === null || data === void 0 ? void 0 : data.right) === null || _b === void 0 ? void 0 : _b.map((item, index) => (React.createElement("li", { className: b('item'), key: index },
+                    React.createElement(NHMobileNavigationItem, { item: item }))))),
+                (data === null || data === void 0 ? void 0 : data.buttons) && (React.createElement("div", { className: b('buttons') }, data.buttons.map((button, index) => (React.createElement(PCButton, Object.assign({}, button, { size: "l", key: index, className: b('button') })))))),
+                (data === null || data === void 0 ? void 0 : data.login) && (React.createElement("div", { className: b('login-items') }, data.login.items.map((item, index) => (React.createElement("div", { key: index, className: b('login-item') },
+                    React.createElement(NHPopupItem, Object.assign({}, item)))))))))));
+};