---
title: Мобильное меню (выезжающая панель + бургер)
section: layout
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-18
files:
  php_inline:
    - views/layouts/main.php:99-183
  php_partials: []
  scss:
    - src/client/mobile-header-md/style.scss
  js:
    - src/client/mobile-nav/index.js
  widgets: []
  shared: []
deps_on:
  - layout/header-mobile
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Мобильное меню

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

Выезжающая сверху панель `#mhd-panel` на мобильных (`d-md-none`). Открывается тапом по бургеру `#mhd-burger` в [header-mobile](header-mobile.md), панель позиционируется сразу под баром.

Содержимое сверху вниз:

1. **Поиск** `.mhd-search` — поле + кнопка «Найти», редирект на `/search/<query>`.
2. **`.mhd-nav`** — крупная serif-навигация с номерами 01–05: Главная, Каталог, Распродажа, Доставка, Контакты.
3. **`.mhd-stats`** — плитка с цифрами (доставлено, рейтинг, скидка, лет на рынке).
4. **`.mhd-more`** — мелкие ссылки: спецпредложения, новинки, избранное, предоплата, оплата, о компании, как оформить заказ, памятка, пожаловаться.

Старые классы `.mobile-nav` / `.aside-menu` / `.mobile-nav-trigger` из разметки удалены, остались только легаси-стили.

## Где живёт

- **HTML inline** в `views/layouts/main.php:99-183`.
- **SCSS:** `src/client/mobile-header-md/style.scss` (общий файл на header-mobile + эту панель).
- **JS:** `src/client/mobile-nav/index.js` — открытие/закрытие, позиционирование, сабмит поиска.

## Поиск в панели

- Поле `.mhd-search__input` намеренно **не** имеет класса `.searchQuery`: `src/client/search/index.js` берёт `document.querySelector('.searchQuery')` — единственный, первый в DOM. Мобильная шапка идёт до десктопной, так что общий класс перехватил бы десктопный поиск.
- `font-size: 16px` у инпута обязателен — иначе iOS Safari зумит страницу при фокусе.
- `action="/search"` — no-JS фолбэк (ведёт на пустую страницу поиска); реальный переход делает обработчик `submit` в `mobile-nav/index.js`, потому что рабочий роут — `search/<query>` (`config/web.php:132`), GET-параметр бэкенд не принимает.
- Значение префилится из `$_GET['query']` — на странице результатов поле показывает текущий запрос.

## Bootstrap-классы

- **Display:** `d-md-none` на корневом `.mhd`.
- Внутри панели — никаких BS-классов, всё через свои BEM-селекторы `.mhd-*`.

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

- `src/client/mobile-nav/index.js`. Не зависит от bootstrap.js.
- Блокировка скролла — класс `body.mhd-lock`. Overlay `.bkg-black` этой панелью не используется.