Header Legacy

@cloud-ru/ds-uikit-product-header-legacy — Legacy-шапка консоли на Snack V2 — HeaderLayout, Logo, MainMenu (desktop/mobile) и PlatformLogo.

@cloud-ru/ds-uikit-product-header-legacy — поэтапная миграция legacy-шапки консоли на компоненты Snack V2: контейнер шапки, логотип, главное меню-drawer и иконка платформы.

Когда использовать

• Нужна обратимо совместимая шапка и меню навигации старого кабинета на стеке @ds/*.
• Собирается MainMenu с селектором платформ и категориями сервисов: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer (или новое bottom-sheet-меню через customMobileMenu).

Когда не нужен пакет:

• Новая продуктовая шапка без legacy-контрактов:
  • используйте @cloud-ru/ds-uikit-product-header.
• Отдельная карточка сервиса вне меню:
  • используйте @cloud-ru/ds-uikit-product-card-predefined.

Установка

pnpm add @cloud-ru/ds-uikit-product-header-legacy

import {
  HeaderLayout,
  Logo,
  MainMenu,
  PlatformLogo,
  useSearch,
  VARIANT,
  HEADER_LOGO_MODE,
} from '@cloud-ru/ds-uikit-product-header-legacy'

Смотри также

• MainMenu — desktop/mobile drawer, слоты leftTop / search, интеграция с MenuMobile через customMobileMenu.
• @cloud-ru/ds-uikit-product-header — новая шапка и mobile bottom sheet для поэтапной миграции.
• @cloud-ru/ds-uikit-product-card-predefined — CardServiceLight в сетке категорий.
• @cloud-ru/ds-drawer — drawer, на котором собран MainMenu.
• @cloud-ru/ds-adaptive — AdaptiveProvider / layoutType для поверхности MainMenu.

HeaderLayout

Контейнер legacy-шапки со слотами menu, logo, select, breadcrumbs и toolbar.

Контейнер legacy-шапки с обратимо совместимыми слотами menu, logo, select, breadcrumbs и toolbar. При isMobile селектор скрывается, хлебные крошки переносятся под основную строку.

Когда использовать

• Нужна единая раскладка верхней полосы консоли с разделителями между слотами.
• Desktop и mobile отличаются только положением breadcrumbs и видимостью select.

Когда не нужен:

• Полноценное боковое меню навигации:
  • используйте MainMenu.

Анатомия

Слоты

• menu — триггер главного меню.
• logo — брендовый логотип.
• select — селектор проекта (скрывается при isMobile).
• breadcrumbs — хлебные крошки (на mobile — под основной строкой).
• toolbar — действия справа.

isMobile (default false)

• false — одна строка: menu + logo + select + breadcrumbs | toolbar.
• true — select скрыт, breadcrumbs во второй строке.

Примеры использования

Desktop

Все слоты в одной строке.

import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

function Slot({ label }: { label: string }) {
  return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}

export function Desktop() {
  return (
    <HeaderLayout
      menu={<Slot label='Menu' />}
      logo={<Logo href='#' />}
      select={<Slot label='Select' />}
      breadcrumbs={<Slot label='Breadcrumbs' />}
      toolbar={<Slot label='Toolbar' />}
    />
  );
}

Mobile

isMobile скрывает select и переносит breadcrumbs.

import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

function Slot({ label }: { label: string }) {
  return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}

export function Mobile() {
  return (
    <HeaderLayout
      isMobile
      menu={<Slot label='Menu' />}
      logo={<Logo href='#' />}
      select={<Slot label='Select' />}
      breadcrumbs={<Slot label='Breadcrumbs' />}
      toolbar={<Slot label='Toolbar' />}
    />
  );
}

Минимальный набор

Только menu, logo и toolbar.

import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

function Slot({ label }: { label: string }) {
  return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}

export function Minimal() {
  return <HeaderLayout menu={<Slot label='Menu' />} logo={<Logo href='#' />} toolbar={<Slot label='Toolbar' />} />;
}

Props

HeaderLayoutProps

Logo

Брендовый логотип шапки — Button neutral/simple с CloudLogo по режиму окружения.

Логотип шапки (Figma buttonSimpleNeutral + CloudLogo). Оболочка — @cloud-ru/ds-button (neutral / simple / m).

Когда использовать

• Слот logo в HeaderLayout.
• Нужен брендовый знак с учётом окружения (mode) или кастомной картинки (path).

Анатомия

Mode (default prod)

• prod — CloudLogo.
• develop — CloudLogoDev.
• stage — CloudLogoStage.
• hybrid — CloudLogoHybrid.

Path и loading

• path — кастомное изображение; при ошибке загрузки — fallback на mode.
• loading — spinner Button.

Примеры использования

Режимы окружения

Все значения HEADER_LOGO_MODE.

import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

export function Modes() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Logo href='#' mode={HEADER_LOGO_MODE.Prod} />
      <Logo href='#' mode={HEADER_LOGO_MODE.Develop} />
      <Logo href='#' mode={HEADER_LOGO_MODE.Stage} />
      <Logo href='#' mode={HEADER_LOGO_MODE.Hybrid} />
    </div>
  );
}

Loading

loading показывает spinner.

import { Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

export function Loading() {
  return <Logo href='#' loading />;
}

Ссылка

Обязательный href на корневой Button-as-link.

import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';

export function CustomHref() {
  return <Logo href='https://cloud.ru' mode={HEADER_LOGO_MODE.Prod} />;
}

Props

LogoProps

Related types

• HeaderLogoMode = "develop" | "hybrid" | "prod" | "stage"

MainMenu

Legacy MainMenu — кнопка MainMenuSVG и адаптивный drawer навигации (desktop / mobile).

Legacy MainMenu (Figma navigationOldDrawer / navigationOldDrawerMobile). Кнопка с MainMenuSVG открывает drawer навигации.

• Desktop — двухколоночный @cloud-ru/ds-drawer (DrawerCustom): левая колонка 256px, divider, правая с поиском и категориями.
• Mobile — по умолчанию левый одноколоночный drawer (не BottomSheet): заголовок «Навигация», scroll-body со sticky-поиском. Через customMobileMenu можно подставить mobile-меню из @cloud-ru/ds-uikit-product-header (bottom sheet).

Поверхность выбирается через AdaptiveProvider (layoutType).

Когда использовать

• Нужно главное меню консоли с селектором платформ, административными пунктами и сеткой сервисов.
• Состав колонок задаётся слотами и данными (serviceGroups, settingItems, search).

Когда не нужен:

• Только верхняя полоса без drawer:
  • используйте HeaderLayout.
• Новая продуктовая навигация без legacy-контрактов:
  • используйте @cloud-ru/ds-uikit-product-header.

Анатомия

Trigger и drawer

• trigger — @cloud-ru/ds-button neutral / simple / m с MainMenuSVG.
• desktop drawer — @cloud-ru/ds-drawer DrawerCustom, слева, ширина по умолчанию 1120px (data-test-id='header__drawer-menu').
• mobile drawer — левый full-height drawer (navigationOldDrawerMobile), не BottomSheet; data-test-id='header__drawer-menu-mobile'.

Левая колонка (desktop)

• leftTop — обычно селектор платформ (PlatformSelector).
• settingItems — административные пункты списка.
• sidebarBottomSlot — слот внизу колонки (например, баннер новой навигации).

Правая колонка (desktop)

• rightTop — баннеры (referral / marketplace).
• search — поиск через useSearch или свой объект (NavigationSearch); закреплён структурно вне Scroll.
• serviceGroups — секции категорий сервисов (ServicesCategory + CardServiceLight).

Mobile body

Порядок в scroll-body:

1. leftTop — в микрофронте и Figma: два PlatformSelector (платформа + проект с avatarName).
2. search — свёрнутый NavigationSearch; при скролле остаётся sticky (position: sticky).
3. rightTop — баннеры в колонку (data-mobile на контейнере).
4. serviceGroups — те же категории в сетке из одной колонки (data-mobile на .services); favorite на карточках всегда виден.
5. settingItems — CardServiceLight + Divider внизу scroll-body.

sidebarBottomSlot на mobile не рендерится (legacy-поведение).

customMobileMenu

Только на mobile: заменяет встроенный legacy MenuMobile (левый drawer). Типичный сценарий — микрофронт с legacy HeaderLayout и новым mobile-меню из @cloud-ru/ds-uikit-product-header.

• MenuMobile импортируется из @cloud-ru/ds-uikit-product-header, не из @cloud-ru/ds-uikit-product-header-legacy.
• Передаются те же controlled open / setOpen, что и в MainMenu — иначе кнопка-триггер и drawer разойдутся.
• Данные для MenuMobile маппятся на API нового header (segments, settingItems и т.д.) отдельно от legacy-пропов MainMenu.

open / setOpen

Controlled-открытие drawer. Без open состояние держит сам компонент. В примерах drawer закрыт до клика по trigger.

Примеры использования

Базовый состав

leftTop, баннеры, settingItems и serviceGroups. Drawer открывается по клику на MainMenuSVG.

import { MainMenu } from '@cloud-ru/ds-uikit-product-header-legacy';
import { useState } from 'react';

import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner';
import { NewNavigationBanner } from '../../../stories/MainMenu/helperComponents/NewNavigationBanner';
import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector';
import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner';
import {
  ADMINISTRATIVE_SECTION,
  DEFAULT_PLATFORM_OPTION,
  MARKETPLACE_BANNER,
  NEW_NAVIGATION_BANNER,
  PLATFORM_OPTIONS_BY_ID,
  PLATFORM_SELECTOR_ITEMS,
  REFERRAL_BANNER,
  SERVICE_GROUPS,
} from '../../fixtures';

export function Basic() {
  const [open, setOpen] = useState(false);
  const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id);
  const selected = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION;

  return (
    <MainMenu
      open={open}
      setOpen={setOpen}
      leftTop={
        <PlatformSelector
          label={selected.label}
          description={selected.description}
          variant={selected.variant}
          items={PLATFORM_SELECTOR_ITEMS}
          value={platformId}
          onChange={id => setPlatformId(String(id))}
        />
      }
      rightTop={
        <>
          <ReferralBanner {...REFERRAL_BANNER} href='#' />
          <MarketplaceBanner {...MARKETPLACE_BANNER} href='#' />
        </>
      }
      settingItems={ADMINISTRATIVE_SECTION}
      serviceGroups={SERVICE_GROUPS}
      sidebarBottomSlot={<NewNavigationBanner {...NEW_NAVIGATION_BANNER} />}
    />
  );
}

С поиском

search из useSearch. Drawer открывается по клику на MainMenuSVG.

import { MainMenu, useSearch } from '@cloud-ru/ds-uikit-product-header-legacy';
import { useState } from 'react';

import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner';
import { NewNavigationBanner } from '../../../stories/MainMenu/helperComponents/NewNavigationBanner';
import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector';
import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner';
import {
  ADMINISTRATIVE_SECTION,
  DEFAULT_PLATFORM_OPTION,
  MARKETPLACE_BANNER,
  NEW_NAVIGATION_BANNER,
  PLATFORM_OPTIONS_BY_ID,
  PLATFORM_SELECTOR_ITEMS,
  REFERRAL_BANNER,
  SERVICE_GROUPS,
} from '../../fixtures';

export function WithSearch() {
  const [open, setOpen] = useState(false);
  const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id);
  const search = useSearch();
  const selected = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION;

  return (
    <MainMenu
      open={open}
      setOpen={setOpen}
      leftTop={
        <PlatformSelector
          label={selected.label}
          description={selected.description}
          variant={selected.variant}
          items={PLATFORM_SELECTOR_ITEMS}
          value={platformId}
          onChange={id => setPlatformId(String(id))}
        />
      }
      rightTop={
        <>
          <ReferralBanner {...REFERRAL_BANNER} href='#' />
          <MarketplaceBanner {...MARKETPLACE_BANNER} href='#' />
        </>
      }
      search={search}
      settingItems={ADMINISTRATIVE_SECTION}
      serviceGroups={SERVICE_GROUPS}
      sidebarBottomSlot={<NewNavigationBanner {...NEW_NAVIGATION_BANNER} />}
    />
  );
}

Mobile-поверхность

AdaptiveProvider layoutType=mobile: два селектора в leftTop (платформа + проект с avatarName), sticky-поиск, баннеры в колонку. sidebarBottomSlot не передаётся — на mobile не рендерится.

import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive';
import { MainMenu, useSearch } from '@cloud-ru/ds-uikit-product-header-legacy';
import { useState } from 'react';

import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner';
import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector';
import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner';
import {
  ADMINISTRATIVE_SECTION,
  DEFAULT_PLATFORM_OPTION,
  DEFAULT_PROJECT_OPTION,
  MARKETPLACE_BANNER,
  PLATFORM_OPTIONS_BY_ID,
  PLATFORM_SELECTOR_ITEMS,
  PROJECT_DESCRIPTION,
  PROJECT_OPTIONS_BY_ID,
  PROJECT_SELECTOR_ITEMS,
  REFERRAL_BANNER,
  SERVICE_GROUPS,
} from '../../fixtures';

/**
 * Mobile-поверхность MainMenu: `leftTop` — PlatformSelector (платформа) + PlatformSelector (проект с `avatarName`).
 * `sidebarBottomSlot` на mobile не рендерится.
 */
export function MobileSurface() {
  const [open, setOpen] = useState(false);
  const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id);
  const [projectId, setProjectId] = useState(DEFAULT_PROJECT_OPTION.id);
  const search = useSearch();

  const selectedPlatform = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION;
  const selectedProject = PROJECT_OPTIONS_BY_ID[projectId] ?? DEFAULT_PROJECT_OPTION;

  return (
    <AdaptiveProvider layoutType={LAYOUT_TYPE.Mobile}>
      <MainMenu
        open={open}
        setOpen={setOpen}
        leftTop={
          <>
            <PlatformSelector
              label={selectedPlatform.label}
              description={selectedPlatform.description}
              variant={selectedPlatform.variant}
              items={PLATFORM_SELECTOR_ITEMS}
              value={platformId}
              onChange={id => setPlatformId(String(id))}
            />
            <PlatformSelector
              label={selectedProject.label}
              description={PROJECT_DESCRIPTION}
              avatarName={selectedProject.label}
              items={PROJECT_SELECTOR_ITEMS}
              value={projectId}
              onChange={id => setProjectId(String(id))}
            />
          </>
        }
        rightTop={
          <>
            <ReferralBanner {...REFERRAL_BANNER} href='#' />
            <MarketplaceBanner {...MARKETPLACE_BANNER} href='#' />
          </>
        }
        search={search}
        settingItems={ADMINISTRATIVE_SECTION}
        serviceGroups={SERVICE_GROUPS}
      />
    </AdaptiveProvider>
  );
}

Новое mobile-меню через customMobileMenu

Controlled-состояние drawer общее для trigger и mobile-меню:

import { useState } from 'react';
import { MainMenu } from '@cloud-ru/ds-uikit-product-header-legacy';
import { MenuMobile } from '@cloud-ru/ds-uikit-product-header';

function HeaderMainMenu() {
  const [open, setOpen] = useState(false);

  return (
    <MainMenu
      open={open}
      setOpen={setOpen}
      serviceGroups={legacyServiceGroups}
      /* …остальные legacy-пропы для desktop… */
      customMobileMenu={
        <MenuMobile
          open={open}
          setOpen={setOpen}
          segments={headerSegments}
          /* …пропы API @cloud-ru/ds-uikit-product-header… */
        />
      }
    />
  );
}

Props

WithSupportProps

Storybook

WithSampleContent (Figma mobile composition):

Figma

Desktop (navigationOldDrawer):

Mobile (navigationOldDrawerMobile):

Смотри также

• @cloud-ru/ds-uikit-product-header / MainMenu — новое меню и экспорт MenuMobile (bottom sheet) для customMobileMenu.
• @cloud-ru/ds-uikit-product-card-predefined — CardServiceLight в сетке категорий и в settingItems на mobile.

Адаптивность

Desktop-first: раскладку берёт AdaptiveProvider в корне приложения / Storybook. Переключение toolbar layoutType=mobile показывает mobile-поверхность без смены API.

Форс конкретной раскладки в Storybook — toolbar-global layoutType или вложенный AdaptiveProvider / withLayoutType.

Целевая композиция mobile (как в Figma) — story Examples / WithSampleContent.

PlatformLogo

Иконка платформы — SVG-бейдж или Avatar с аббревиатурой.

Иконка платформы (Figma platformSelectorIcons). Используется в PlatformSelector и пунктах Droplist. При avatarName рендерится Avatar с инициалами вместо SVG-варианта — для mobile project selector.

Когда использовать

• Нужна иконка платформы в селекторе или списке.
• Для пунктов Droplist — compact (24×24 без padding).

Анатомия

Variant (default evolution)

• evolution / advanced / vmware — SVG на accent-бейдже.
• partner / marketplace — @cloud-ru/ds-avatar squared («ПК» / «МА»).

Compact (default false)

• false — бейдж 32×32 для trigger.
• true — 24×24 для listItem (padding 0, Avatar size s).

AvatarName

Опциональная строка для Avatar в trigger. При наличии перекрывает variant-иконку: рендерится squared Avatar с двумя символами из имени (например «Название проекта 1» → «НА»).

Используется вместе с PlatformSelector.avatarName в mobile leftTop MainMenu (селектор проекта).

Локализованные имена для partner / marketplace без avatarName берутся из headerLegacyLocale (platformLogo.avatarName.*).

Примеры использования

Варианты

Все значения VARIANT.

import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';

export function Variants() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      {Object.values(VARIANT).map(variant => (
        <PlatformLogo key={variant} variant={variant} />
      ))}
    </div>
  );
}

Compact

Размер для пунктов Droplist.

import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';

export function Compact() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <PlatformLogo variant={VARIANT.Evolution} compact />
      <PlatformLogo variant={VARIANT.Partner} compact />
    </div>
  );
}

Avatar-варианты

partner и marketplace.

import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';

export function AvatarVariants() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <PlatformLogo variant={VARIANT.Partner} />
      <PlatformLogo variant={VARIANT.Marketplace} />
    </div>
  );
}

avatarName

Произвольное имя для Avatar — как в mobile project selector.

import { PlatformLogo } from '@cloud-ru/ds-uikit-product-header-legacy';

export function AvatarName() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <PlatformLogo avatarName='Название проекта 1' />
      <PlatformLogo avatarName='Staging environment' compact />
    </div>
  );
}

Props

PlatformLogoProps

Related types

• Variant = "advanced" | "evolution" | "marketplace" | "partner" | "vmware"