<GrNavbar title="Договоры" :heading-level="1" />

По умолчанию заголовок шапки — div, и это не упущение: логотип и название приложения заголовками не являются, а h1 на бренде исказил бы структуру страницы. Большинство шапок именно такие.

Но шапка раздела админки или имя открытого документа — заголовок и есть, и без headingLevel обойти такую страницу по структуре нечем: после h1 в ней не оказывается ни одного заголовка.

Единица разрешена, в отличие от GrCard, где шкала начинается с двойки. Карточка никогда не бывает заголовком страницы, а шапка раздела — бывает.

Через GrConfigProvider уровень не настраивается намеренно. «Заголовка нет» там не выразить, то есть общим дефолтом стал бы какой-то уровень — и брендовые шапки всех потребителей молча получили бы заголовок. Да и шапка у оболочки одна: глобальный дефолт настраивал бы единственное место вызова.

Вид от уровня не зависит: кегль и вес те же, а браузерный отступ заголовка погашен явно. Префлайт пакета сбрасывает margin только у body, поэтому приложение с tailwind-совместимым сбросом его и не увидело бы, — но высота шапки не должна зависеть от того, подключил ли потребитель чужой reset.

<GrNavbar>
  <template #title>
    <RouterLink to="/">Granularity</RouterLink>
  </template>

  <template #center>
    <GrInput placeholder="Поиск" size="sm" aria-label="Поиск" />
  </template>

  <GrButton size="sm">Опубликовать</GrButton>
</GrNavbar>

Проп title необязателен: заголовок собирается разметкой через слот. Когда нет ни строки, ни слота, блок заголовка не рендерится и не съедает отступ.

Центральная зона появляется только вместе со слотом. При ней боковые зоны делят остаток поровну — иначе «центр» считался бы от остатка и уезжал вслед за более широким боком.

Когда места не хватает

Действия справа — глобальный интерфейс: поиск, уведомления, аватар. Эта зона не сжимается никогда. Уступают left и center: они не шире остатка и прокручиваются вбок без видимой полосы. Прокрутка, а не обрезка — ссылка за краем остаётся достижимой, фокус с клавиатуры прокручивает зону к ней. Раньше переполненный left рисовался поверх действий: на 600px «Reports» ложился на «Search». Действий шире своей доли при центральной зоне — тоже без сжатия: центр в этом случае смещается, но ничего не перекрывает.

Шапка с большим числом разделов на узком экране — повод убрать их в меню (showMenuButton), а не надеяться на прокрутку.

<GrNavbar sticky />

sticky оставляет панель наверху при прокрутке. Слой — --gr-z-navbar (900): ниже якорных панелей (--gr-z-dropdown — 1000), поэтому открытый список, тултип или модалка панель перекрывают, а не уезжают под неё. Подробности — ../z-index.md.

Задаётся переменной --gr-navbar-height (по умолчанию 56px) — на самой панели, на предке или в теме:

.app-shell { --gr-navbar-height: 48px; }

showMenuButton показывает кнопку и эмитит menu; её доступное имя приходит из локали (gr.navbar.openMenu). menuButtonClass нужен, чтобы прятать кнопку на широких экранах (sm:hidden) — панель не решает за приложение, когда меню сворачивается.

size задаёт ступень только этой кнопки — остальное в шапке принадлежит потребителю, а высоту ряда держит --gr-navbar-height. Читается из GrConfigProvider (componentDefaults.GrNavbar.size).

Фолбэк — sm (32px), а не общий для пакета md: кнопка была этого размера с самого начала, и подъём по умолчанию сдвинул бы шапку у всех. Нужен полноценный тач-таргет — size="lg" даёт 44px и помещается в ряд высотой 56px.