---
title: Шапка (десктоп)
section: layout
theme: mebelidomanet
framework: bootstrap
redesign_status: pending
last_updated: 2026-07-11
files:
  php_inline:
    - views/layouts/main.php:206-464
  php_partials:
    - views/layouts/_cart-informer.php
    - views/layouts/_favorite-informer.php
    - views/search/_search-form.php
  scss:
    - src/client/laptop-header/index.scss
    - src/client/topbar-md/style.scss
    - src/client/header-actions-md/style.scss
  js:
    - src/client/laptop-header/index.js
  widgets:
    - components/MenuView.php
    - components/MenuTab.php
    - components/SocialIcons.php
  shared: []
deps_on:
  - informers/cart-informer
  - informers/favorite-informer
  - layout/modal-callback
  - layout/modal-location
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Шапка (десктоп)

## Назначение

Большая многоярусная шапка сайта для размеров `md+`. Скрыта на мобильных (`d-md-block` + `d-none`). Состоит из четырёх уровней (сверху вниз):

1. **Fixed top bar** — узкая полоска поверх вьюпорта: кнопка «Каталог», поиск, телефон, информеры избранного и корзины. Появляется при скролле через JS.
2. **Top horizontal menu + кнопка «Обратный звонок»** — выводится виджетом `MenuView::widget(['type' => 'topHorisontal'])`.
3. **Логотип + контакты + большой поиск + информеры** — основной верхний бар.
4. **Кнопочная навигация по категориям** (Кровати/Диваны/Шкафы/...) + всплывающее «Hover Big Menu» через `MenuTab::widget`.

## Где живёт

- **HTML целиком inline** в `views/layouts/main.php:206-464`, **не вынесен в partial**. Это самый большой блок layout-а.
- **SCSS:** `src/client/laptop-header/index.scss` — стили под `.laptop-header__*`.
- **JS:** `src/client/laptop-header/index.js` — экспортирует `visibleTopCap()`, навешивается в `src/client/index.js:87` на `window scroll` для показа/скрытия `.laptop-header__fix`.
- **Виджеты:**
  - `MenuView::widget(['type' => 'topHorisontal'])` — горизонтальное меню (`views/layouts/main.php:250-254`).
  - `MenuTab::widget(...)` — табы каталога c hover-разворотом (`views/layouts/main.php:438-458`), кешируется по доменам (см. `docs/cache.md`).
  - `SocialIcons::widget(['theme' => 'brown'])` — иконки соцсетей (`views/layouts/main.php:311`).
- **Partials внутри:**
  - `views/layouts/_cart-informer.php` (через `$this->render("_cart-informer")`) — counter корзины, см. [informers/cart-informer](../informers/cart-informer.md).
  - `views/layouts/_favorite-informer.php` — то же для избранного.
  - `views/search/_search-form.php` — поисковая форма.

## Bootstrap-классы, которые здесь используются

- **Сетка:** `container`.
- **Flexbox:** `d-flex`, `d-inline-block`, `flex-shrink-1`, `flex-fill`, `flex-column`, `align-items-center`, `align-self-center`, `justify-content-between`, `justify-content-center`.
- **Display utilities:** `d-md-block`, `d-md-none`, `d-none`, `d-block`.
- **Spacing:** `mr-2`, `mr-3`, `ml-2`, `ml-auto`, `pl-4`, `pl-2`, `pr-3`, `pr-4`, `pr-0`, `px-3`, `px-4`, `py-1`, `py-2`, `py-3`, `py-4`, `mb-3`, `mb-0`, `m-0`, `p-0`.
- **Кнопки:** `btn`, `btn-primary`, `btn-light`, `btn-warning`, `btn-sm`, `btn-outline-primary`, `btn-block`.
- **Layout-утилиты:** `fixed-top`, `position-relative`, `position-absolute`, `border`, `border-right`, `border-left`, `border-bottom`, `border-light`, `rounded`, `bg-light`.
- **Текст:** `text-center`, `text-right`, `text-uppercase`, `text-secondary`, `font-weight-bold`.
- **List-utilities:** `list-unstyled`.
- **Input-group:** `input-group`, `input-group-append`, `form-control`.

## JS-зависимости

- `data-toggle="modal" data-target="#callbackPhone"` — открывает модалку обратного звонка (Bootstrap JS из `import 'bootstrap'`).
- `data-toggle="modal" data-target="#modalLocation"` — открывает модалку выбора города.
- `visibleTopCap()` из `src/client/laptop-header/index.js` — слушает `scroll` window, показывает/скрывает `.laptop-header__fix`.
- Поиск (`searchInput`, `searchBtn`) — обрабатывается JS из `src/client/search/index.js`.

## Зависит от других блоков

- [informers/cart-informer](../informers/cart-informer.md) — две вставки: в fixed-bar и в основной бар.
- [informers/favorite-informer](../informers/favorite-informer.md) — то же.
- [layout/modal-callback](modal-callback.md) — открывается из кнопки «Обратный звонок».
- [layout/modal-location](modal-location.md) — открывается из ссылок с городом.

## Заметки

- **Действия шапки «Избранное» / «Корзина» (`.md-hdr-actions`, редизайн в стиле ../mebel-landing).** В основном баре (`.header-center`) две ссылки-действия с тонкими outline-иконками (сердце + сумка) вместо прежних «жирных» filled Bootstrap-глифов с inline-стилями. Иконка корзины — та же outline-сумка, что и в мобильной шапке `.mhd` (иконочная консистентность по всему сайту), иконки согласованы со stroke-иконками `.md-topbar` (город/график/телефон). Стили: `src/client/header-actions-md/style.scss` (scope `.md-hdr-action*`, палитра из `_md-tokens.scss`). Точки монтирования счётчиков `.favoriteCounter` / `.cartCounter` сохранены — React (`FavoriteCounter`/`CartCounter`) рендерит внутрь `.indicator__value`, бейдж абсолютится относительно `.md-hdr-action__icon`.
- **Верхняя утилитарная полоса (`.header-top.md-topbar`, редизайн в стиле ../mebel-landing).** Семь inline-ссылок (О компании / Контакты / Доставка / Оплата / Рассрочка / Гарантия / Отзывы) свёрнуты в один CSS-only дропдаун «Информация» (hover + `:focus-within`, без JS); справа — город / график / телефон с иконками и хайрлайн-разделителями. Стили: `src/client/topbar-md/style.scss` (scope `.md-topbar`, палитра из `_md-tokens.scss`). Ссылки заданы PHP-массивом `$topbarLinks` inline в `main.php` и рендерятся циклом. Только десктоп (полоса внутри `#laptop-header.d-none.d-md-block`).
- Шапка плотно интегрирована с виджетом `MenuTab`, который **кеширует** свой результат (см. `docs/cache.md` — кеш меню по доменам, инвалидируется по `dateUpdated` в `menu`). При тестах редизайна могут оставаться старые HTML-фрагменты в кеше — чистить `runtime/cache/`.
- Огромный inline-блок (260 строк PHP) — кандидат на вынесение в partial (`views/layouts/_header-laptop.php`), но это отдельная задача от редизайна.
- Логотип задан как SVG в `/images/mebelidomanet-logo-*.svg` — менять не надо.