@cloud-ru/ds-uikit-product-header 1.1.1 → 1.1.2-preview-d405de03.0

package/README.md

@@ -206,6 +206,7 @@ export function WithFavorites() {
 | `disabled` | `boolean` | — |  |
 | `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
 | `favorite` | `FavoriteProps` | — |  |
+| `leftBottom` | `ReactNode` | — |  |
 | `leftTop` | `ReactNode` | — |  |
 | `loading` | `boolean` | — | Флаг загрузки данных |
 | `logo` | `ReactNode` | — |  |
@@ -221,16 +222,42 @@ export function WithFavorites() {
 | `segmentPrefs` | `MainMenuSegmentPrefs` | — | Пользовательские prefs сегментов (порядок / раскрытие групп). <br/> Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля. |
 | `segments` | `MainMenuSegment` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
 | `setOpen` | `((open: boolean) => void)` | — |  |
-| `settingItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+| `settingItems` | `InnerLink` \| `MainMenuSettingsItem` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список (`dividerBefore` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
 
 ##### Related types
 
-**EmptyStateProps**
+**FavoriteProps**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isFavoritesSegment` | `boolean` | — |  |
-| `isMobile` | `boolean \| undefined` | — |  |
+| `actions` | `BaseItemProps` | — | Действия для списка сервисов |
+| `loading` | `boolean \| undefined` | — | Флаг загрузки данных |
+| `onChange` | `(productId: string) => (addingValue: boolean, position?: number) => void` | — | Колбэк переключения избранного для карточки сервиса. <br/> `position` передаётся при добавлении через drag из сетки сервисов — индекс, <br/> на который должна встать карточка среди избранного (см. <br/> {@link <br/> FavoriteProps.onOrderChange <br/> } <br/> ). <br/> При переключении избранного кликом не передаётся. |
+| `onFavoriteServiceClick` | `((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined` | — | Колбэк клика по карточке сервиса в сегменте «Избранное» |
+| `onOrderChange` | `((orderedIds: string[]) => void) \| undefined` | — | Колбэк вызывается после перетаскивания карточек внутри избранного с новым порядком id. <br/> Добавление новой карточки через drag из сетки сервисов идёт через <br/> {@link <br/> FavoriteProps.onChange <br/> } <br/> с `position` — этот колбэк для такого добавления не вызывается. |
+| `onRecentServiceClick` | `((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined` | — | Колбэк клика по карточке сервиса в сегменте «Недавнее» |
+| `onSegmentChange` | `((segment: FavoritesSegment) => void) \| undefined` | — | Колбэк смены сегмента панели избранного. |
+| `recentServices` | `string[] \| undefined` | — | Список id недавно открытых сервисов |
+| `segment` | `"favorites"` \| `"recent"` | — | Активный сегмент («Избранное» / «Недавнее») в панели избранного. <br/> Не передано — неуправляемое состояние (дефолт `'favorites'`). |
+| `value` | `string[]` | — | Список id избранных сервисов |
+
+- `FavoritesSegment` = `"favorites"` \| `"recent"`
+
+**InnerLink**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `aliases` | `string[]` | — | Синонимы для fuzzy-поиска. |
+| `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
+| `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
+| `disabled` | `boolean \| undefined` | — |  |
+| `hidden` | `boolean \| undefined` | — |  |
+| `href` | `string \| undefined` | — |  |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — | Иконка карточки. |
+| `id` | `string` | — | Уникальный идентификатор карточки (также используется в избранном и при поиске). <br/> Один и тот же сервис может быть представлен в разных сегментах с разной <br/> детализацией (простая карточка в общем каталоге и раскрытая с вложенными <br/> сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся <br/> общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах <br/> остаётся только первое по приоритету сегментов (см. <br/> {@link <br/> MainMenuProps.segments <br/> } <br/> ). |
+| `items` | `InnerLink` | — | Вложенные сервисы подкатегории. <br/> При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка <br/> с кнопкой раскрытия, в развёрнутом — заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> и сетка вложенных сервисов. |
+| `label` | `string` | — | Заголовок карточки. |
+| `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
 
 **LinksGroup**
 
@@ -241,11 +268,21 @@ export function WithFavorites() {
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточек группы в избранное. |
 | `hidden` | `boolean \| undefined` | — |  |
 | `highlight` | `boolean \| undefined` | — | Визуальное выделение группы |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — |  |
 | `id` | `string` | — | Уникальный идентификатор группы (якорь скролла, поиск по id). |
 | `items` | `InnerLink` | — | Карточки сервисов или ссылок внутри группы. |
 | `label` | `LinksGroupTitle` \| `TitleClickable` \| `TitleStatic` | — | Заголовок группы в сетке карточек и в боковой навигации. |
 | `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
 
+**MainMenuPreferencesProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onOpenChange` | `((open: boolean) => void) \| undefined` | — | Колбэк открытия/закрытия модалки. |
+| `open` | `boolean \| undefined` | — | Открыта ли модалка настроек. <br/> Не передано — состояние открытия неуправляемое (модалка сама переключает себя по клику на кнопку). |
+| `showDescription` | `MainMenuToggleProps` | — | Показывать описания сервисов в карточках. |
+| `showGroupsColors` | `MainMenuToggleProps` | — | Отображать цвета блоков групп ( <br/> {@link <br/> LinksGroup.blockColor <br/> } <br/> ). <br/> `value: false` скрывает цвета всех групп независимо от заданного `blockColor`. |
+
 **MainMenuSegment**
 
 | Prop | Type | Default | Description |
@@ -264,6 +301,35 @@ export function WithFavorites() {
 | `id` | `string` | — | Id сегмента из <br/> {@link <br/> MainMenuSegment.id <br/> } <br/> . |
 | `order` | `string[] \| undefined` | — | Порядок id групп. Если не передан — uncontrolled для этого сегмента <br/> (дефолт = порядок `items`; новые группы добавляются в конец). |
 
+**MainMenuSettingsItem**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dividerBefore` | `boolean \| undefined` | — |  |
+| `hidden` | `boolean \| undefined` | — |  |
+| `href` | `string \| undefined` | — |  |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — | Иконка карточки. |
+| `id` | `string` | — | Уникальный идентификатор карточки (также используется в избранном и при поиске). <br/> Один и тот же сервис может быть представлен в разных сегментах с разной <br/> детализацией (простая карточка в общем каталоге и раскрытая с вложенными <br/> сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся <br/> общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах <br/> остаётся только первое по приоритету сегментов (см. <br/> {@link <br/> MainMenuProps.segments <br/> } <br/> ). |
+| `label` | `string` | — | Заголовок карточки. |
+| `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+
+**MainMenuToggleProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onChange` | `(value: boolean) => void` | — |  |
+| `value` | `boolean` | — |  |
+
+**SearchProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | — | Колбек обработки потери фокуса |
+| `onChange` | `(value: string) => void` | — |  |
+| `onFocus` | `FocusEventHandler<HTMLInputElement> \| undefined` | — | Колбек обработки получения фокуса |
+| `onSearchNoResult` | `((value: string) => void) \| undefined` | — |  |
+| `value` | `string` | — |  |
+
 ## UserMenu
 
 Меню пользователя — профиль, переключатель темы, пункты настроек и выход.

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js

@@ -25,8 +25,7 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     const { t } = locale_1.headerLocale.useTranslations();
     const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
     const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
-    const visibleSegments = (0, react_1.useMemo)(() => segments.filter(segment => segment.items.some(group => (0, utils_2.getLinksGroupVisibleItemsCount)(group) > 0)), [segments]);
-    const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
+    const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
     const [segmentId = defaultSegmentId, setSegmentId] = (0, utils_1.useValueControl)({
         value: activeSegmentId,
         defaultValue: defaultSegmentId,
@@ -35,10 +34,10 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
     (0, react_1.useEffect)(() => {
-        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+        if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
             setSegmentId(defaultSegmentId);
         }
-    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
     const handleLinkClick = (0, react_1.useCallback)(({ disabled, onClick }, e) => {
         if (disabled) {
             e?.preventDefault();
@@ -79,23 +78,23 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
     }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
-    const segmentItems = (0, react_1.useMemo)(() => visibleSegments.map(segment => ({
+    const segmentItems = (0, react_1.useMemo)(() => segments.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
-    })), [visibleSegments]);
+    })), [segments]);
     const hasCards = visibleGroups.length > 0;
     const cards = (() => {
         if (loading) {
             return Array.from({ length: 5 }).map((_, index) => (0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupSkeleton, { isMobile: isMobile }, index));
         }
         if (hasCards) {
-            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, items, favoritesEnabled = true, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
+            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, icon, items, favoritesEnabled = true, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
         }
         return ((0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: 'm', icon: {
                 icon: system_1.SearchSVG,
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": !hasCards || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.d.ts

@@ -1,11 +1,11 @@
-import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
+import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
 import { SortableGroupCardsProps } from './components';
-export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
     id: string;
     label: LinksGroupTitle;
     isExpanded?: boolean;
     blockColor?: LinksGroupBlockColor;
     highlight?: boolean;
 };
-export declare function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js

@@ -14,7 +14,7 @@ const theme_1 = require("@cloud-ru/ds-theme");
 const constants_1 = require("../../constants");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
+function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
         id,
         disabled: !enableServiceDrag,
@@ -28,7 +28,7 @@ function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile
         transition,
     };
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
-    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }) })] }));
 }
 function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }) {
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,9 +1,9 @@
-import { LinksGroupTitle } from '../../../../../types';
+import { LinksGroup, LinksGroupTitle } from '../../../../../types';
 import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
-export type SortableGroupHeaderProps = {
+export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-export declare function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -8,8 +8,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const typography_1 = require("@cloud-ru/ds-typography");
+const uikit_product_title_clickable_1 = require("@cloud-ru/ds-uikit-product-title-clickable");
+const utils_1 = require("../../../../../utils");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const SortableGroupDragHandle_1 = require("./SortableGroupDragHandle");
-function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, children: label.text }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = e => {
+        e.stopPropagation();
+        label?.onClick?.(e);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, before: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -50,6 +50,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -4,16 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuDesktop = MenuDesktop;
+const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
 const drawer_1 = require("@cloud-ru/ds-drawer");
-const list_1 = require("@cloud-ru/ds-list");
 const scroll_1 = require("@cloud-ru/ds-scroll");
+const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
 const utils_1 = require("@cloud-ru/ds-utils");
-const react_1 = require("react");
+const react_2 = require("react");
 const constants_1 = require("../../../../constants");
 const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
+const utils_2 = require("../../utils");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
 const MenuHeaderBrand_1 = require("../MenuHeaderBrand");
@@ -21,7 +23,7 @@ const MountAnimation_1 = require("../MountAnimation");
 const Search_1 = require("../Search");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
@@ -29,7 +31,7 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
         platformGroups,
     });
     const hasSearch = Boolean(search);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!open || !hasSearch) {
             return;
         }
@@ -41,16 +43,17 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
         return () => cancelAnimationFrame(frameId);
     }, [open, hasSearch, searchRef]);
     const isNeedRightBlock = segments && segments.some(segment => segment.items.length > 0);
-    const allServiceGroups = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+    const hasBottomItems = Boolean(settingItems?.length) || Boolean(leftBottom);
+    const allServiceGroups = (0, react_2.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
     const mainMenuDnd = (0, useMainMenuDnd_1.useMainMenuDnd)({
         favorite,
         groups: allServiceGroups,
         showDescription: preferences?.showDescription.value ?? false,
     });
-    const handleCloseDrawer = (0, react_1.useCallback)(() => {
+    const handleCloseDrawer = (0, react_2.useCallback)(() => {
         setOpen(false);
     }, [setOpen]);
-    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems ?? [], size: 'm', barHideStrategy: 'never', className: styles_module_scss_1.default.settingItems }))] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftBottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftBottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.dividerBefore && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.leftBottomDivider }), (0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` })] }))) }), leftBottom] })) : null] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
     return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": constants_1.TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: constants_2.MENU_WIDTH_MIN,

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -43,9 +43,18 @@
   min-height:0;
 }
 
-.settingItems{
-  flex-shrink:0;
-  height:auto;
+.leftBottomItems{
+  width:100%;
+}
+
+.leftBottom{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.leftBottomDivider{
+  margin:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .right{
@@ -63,6 +72,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }

package/dist/cjs/components/MainMenu/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseItemProps, ListProps } from '@cloud-ru/ds-list';
+import { BaseItemProps } from '@cloud-ru/ds-list';
 import { SearchProps as SearchPropsSnack } from '@cloud-ru/ds-search';
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { JSXElementConstructor, MouseEvent, ReactNode } from 'react';
@@ -19,12 +19,7 @@ export type InnerLink = {
      * остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments}).
      */
     id: string;
-    /**
-     * Иконка карточки.
-     *
-     * Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label`
-     * (см. `getAvatarNameFromLabel`).
-     */
+    /** Иконка карточки. */
     icon?: JSXElementConstructor<{
         size?: number;
         className?: string;
@@ -53,9 +48,11 @@ export type InnerLink = {
 type TitleStatic = {
     text: string;
     onClick?: never;
+    href?: never;
 };
 type TitleClickable = {
     text: string;
+    href?: string;
     onClick?(e?: MouseEvent<HTMLElement>): void;
 };
 export type LinksGroupTitle = TitleStatic | TitleClickable;
@@ -71,6 +68,10 @@ export type LinksGroup = {
     id: string;
     /** Заголовок группы в сетке карточек и в боковой навигации. */
     label: LinksGroupTitle;
+    icon?: JSXElementConstructor<{
+        size?: number;
+        className?: string;
+    }>;
     /**
      * Синонимы заголовка группы для fuzzy-поиска.
      */
@@ -202,12 +203,16 @@ export type MainMenuPreferencesProps = {
      */
     showGroupsColors?: MainMenuToggleProps;
 };
+export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'onClick' | 'href' | 'hidden'> & {
+    dividerBefore?: boolean;
+};
 export type MainMenuProps = {
     disabled?: boolean;
     open?: boolean;
     setOpen?(open: boolean): void;
     logo?: ReactNode;
     leftTop?: ReactNode;
+    leftBottom?: ReactNode;
     rightTop?: ReactNode;
     /**
      * Сегменты правой панели (сетка карточек) — только каталог.
@@ -245,10 +250,10 @@ export type MainMenuProps = {
     /**
      * Пункты левой колонки (desktop) / нижней части списка (mobile).
      *
-     * Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей).
+     * Плоский список (`dividerBefore` для разделителей).
      * Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.
      */
-    settingItems?: ListProps['items'];
+    settingItems?: MainMenuSettingsItem[];
     /**
      * Платформенные группы (например «Облачные продукты», «Другие продукты»).
      *

package/dist/cjs/components/MainMenu/utils/getLinkEmblem.d.ts

@@ -1,3 +1,3 @@
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { InnerLink } from '../types';
-export declare function getLinkEmblem(link: InnerLink): CardServiceLightProps['icon'];
+export declare function getLinkEmblem(link: Pick<InnerLink, 'icon'>): CardServiceLightProps['icon'];

package/dist/cjs/components/MainMenu/utils/getLinkEmblem.js

@@ -1,18 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLinkEmblem = getLinkEmblem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const avatar_1 = require("@cloud-ru/ds-avatar");
 const react_1 = require("react");
-const getAvatarNameFromLabel_1 = require("./getAvatarNameFromLabel");
-function createAvatarIcon(displayName) {
-    return function LinkAvatarIcon({ className }) {
-        return ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { name: displayName, showTwoSymbols: true, shape: 'squared', appearance: 'neutral', size: 's', className: className }));
-    };
-}
 function getLinkEmblem(link) {
     if (!link.icon) {
-        return (0, react_1.createElement)(createAvatarIcon((0, getAvatarNameFromLabel_1.getAvatarNameFromLabel)(link.label)));
+        return undefined;
     }
     return (0, react_1.createElement)(link.icon);
 }

package/dist/cjs/components/MainMenu/utils/index.d.ts

@@ -1,5 +1,4 @@
 export * from './innerLink';
-export * from './getAvatarNameFromLabel';
 export * from './flatLinksGroups';
 export * from './getLinkEmblem';
 export * from './mapInnerLinksToListItems';

package/dist/cjs/components/MainMenu/utils/index.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./innerLink"), exports);
-__exportStar(require("./getAvatarNameFromLabel"), exports);
 __exportStar(require("./flatLinksGroups"), exports);
 __exportStar(require("./getLinkEmblem"), exports);
 __exportStar(require("./mapInnerLinksToListItems"), exports);

package/dist/cjs/components/PathBreadcrumbs/styles.module.css

@@ -1,4 +1,7 @@
 .breadcrumbs{
+  display:flex;
+  align-items:center;
   min-width:0;
+  height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
 }

package/dist/cjs/constants.d.ts

@@ -10,6 +10,8 @@ export declare const TEST_IDS: {
         readonly search: "header__drawer-menu__search";
         readonly left: "header__drawer-menu__left";
         readonly right: "header__drawer-menu__right";
+        readonly leftBottom: "header__drawer-menu__left-bottom";
+        readonly leftBottomItems: "header__drawer-menu__left-bottom-items";
     };
     readonly userMenu: {
         readonly root: "header__user-menu";

package/dist/cjs/constants.js

@@ -13,6 +13,8 @@ exports.TEST_IDS = {
         search: 'header__drawer-menu__search',
         left: 'header__drawer-menu__left',
         right: 'header__drawer-menu__right',
+        leftBottom: 'header__drawer-menu__left-bottom',
+        leftBottomItems: 'header__drawer-menu__left-bottom-items',
     },
     userMenu: {
         root: 'header__user-menu',

package/dist/cjs/style.css

@@ -157,6 +157,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
 }
@@ -297,6 +298,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
@@ -646,9 +648,18 @@
   min-height:0;
 }
 
-.settingItems{
-  flex-shrink:0;
-  height:auto;
+.leftBottomItems{
+  width:100%;
+}
+
+.leftBottom{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.leftBottomDivider{
+  margin:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .right{
@@ -666,6 +677,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
@@ -827,7 +839,10 @@
   min-width:0;
 }
 .breadcrumbs{
+  display:flex;
+  align-items:center;
   min-width:0;
+  height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
 }
 .container{