NavBar

NavBar - компонент для создания шапки страниц, боковые блоки идентичны по ширине сайдбарам из TheLayout

Props

userMenuActive

• type: boolean
• default: false
• sync: true

Состояние левой кнопки в left-mobile слоте

authMenuActive

• type: boolean
• default: false
• sync: true

Состояние правой кнопки в right-mobile слоте

disableDefaultLeftMobileSlot

• type: boolean
• default: false

Отключение дефолтного содержимого для слота left-mobile

disableDefaultRightMobileSlot

• type: boolean
• default: false

Отключение дефолтного содержимого для слота right-mobile

Css

--c-nav-bar-bg

• type: color

Цвет фона шапки

Размеры при разных breakpoints

Events

update:userMenuActive

• type: boolean

update:authMenuActive

• type: boolean

Slots

default

Слот центрального блока. В случае если какой-то из боковых слотов не указан, default расширяется

left

Слот левого блока

left-desktop

Слот левого десктопного блока, скрывается при разрешении меньше md

left-mobile

Слот левого мобильного блока, скрывается при разрешении выше md. По умолчанию содержит кнопку переключателя userMenu

right

Слот правого блока

right-desktop

Слот правого десктопного блока, скрывается при разрешении меньше md

right-mobile

Слот правого мобильного блока, скрывается при разрешении выше md. По умолчанию содержит кнопку переключателя authMenu

Пример условного рендера слота

<template>
  <NavBar>
    <template #left-desktop>
      <div v-if="foo">
        Dynamic slot content
      </div>
    </template>

    Some central content
  </NavBar>
</template>

Смотрите так-же

• NavBarButton - компонент кнопки для NavBar