Боковая панель v-navigation-drawer

Компонент v-navigation-drawer в Vuetify представляет собой боковую панель навигации, которая может располагаться слева или справа, быть статической, фиксированной или скрытой по умолчанию. Он служит для организации меню приложения и позволяет создавать как простые панели, так и сложные навигационные структуры с вложенными элементами.

Основные свойства:

  • v-model – управляет видимостью панели (true/false).
  • app – интегрирует панель с layout приложения, чтобы основной контент смещался при открытии.
  • permanent – делает панель постоянно видимой на всех разрешениях.
  • temporary – панель ведёт себя как overlay, закрываясь при клике вне её области.
  • right – размещает панель справа вместо стандартного левого положения.
  • mini-variant – уменьшенный вид панели с отображением только иконок.
  • clipped – при использовании с v-app-bar позволяет «врезать» панель под верхнюю панель приложения.

Пример базовой навигационной панели:

<v-navigation-drawer v-model="drawer" app>
  <v-list>
    <v-list-item link>
      <v-list-item-icon>
        <v-icon>mdi-home</v-icon>
      </v-list-item-icon>
      <v-list-item-content>
        <v-list-item-title>Главная</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-list-item link>
      <v-list-item-icon>
        <v-icon>mdi-account</v-icon>
      </v-list-item-icon>
      <v-list-item-content>
        <v-list-item-title>Профиль</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Mini-variant и управление шириной

mini-variant используется для компактного отображения панели, когда видны только иконки. Панель может автоматически расширяться при наведении курсора или по клику, создавая удобный интерфейс для приложений с ограниченным пространством.

  • mini-variant-width – задаёт ширину мини-панели.
  • width – задаёт стандартную ширину раскрытой панели.
  • expand-on-hover – раскрытие панели при наведении.
<v-navigation-drawer
  v-model="drawer"
  app
  :mini-variant.sync="mini"
  :width="300"
  :mini-variant-width="80"
  expand-on-hover
>
  ...
</v-navigation-drawer>

Работа с режимами отображения

Компонент поддерживает три основных режима:

  1. Permanent – панель всегда видна, основной контент автоматически смещается.
  2. Temporary – панель появляется поверх контента, скрывается при клике вне её области или свайпе.
  3. Persistent – промежуточный режим: панель может быть скрыта, но не перекрывает контент полностью.
<v-navigation-drawer
  v-model="drawer"
  app
  temporary
>
  ...
</v-navigation-drawer>

Список и вложенные элементы

Для построения меню используется компонент v-list. Вложенные элементы создаются с помощью v-list-group:

<v-list>
  <v-list-group prepend-icon="mdi-folder" value="true">
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>Проекты</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item link>
      <v-list-item-content>
        <v-list-item-title>Проект A</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-list-item link>
      <v-list-item-content>
        <v-list-item-title>Проект B</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list-group>
</v-list>

Ключевые моменты:

  • prepend-icon и append-icon позволяют добавить иконки для групп и пунктов.
  • Атрибут value контролирует раскрытие группы (true – раскрыта, false – закрыта).
  • Вложенные списки можно комбинировать для создания многоуровневых меню.

Интеграция с v-app-bar и layout

При использовании с v-app-bar можно применять опцию clipped, чтобы верхняя панель оставалась на месте, а боковая панель под неё «врезалась»:

<v-app-bar app clipped-left>
  <v-toolbar-title>Моё приложение</v-toolbar-title>
</v-app-bar>

<v-navigation-drawer v-model="drawer" app clipped>
  ...
</v-navigation-drawer>

Адаптивное поведение

Компонент поддерживает адаптивное поведение на мобильных устройствах:

  • Использование temporary для скрытия панели по умолчанию на малых экранах.
  • Управление состоянием через v-model.
  • Применение hide-overlay для отключения затемнения фона при временной панели.
<v-navigation-drawer
  v-model="drawer"
  app
  temporary
  hide-overlay
>
  ...
</v-navigation-drawer>

Стилизация и кастомизация

  • Цвета: задаются через свойства color, dark, light.
  • Тень и elevation: через elevation="4" можно управлять глубиной тени.
  • Собственные классы: добавляются через class или style для точной настройки внешнего вида.
<v-navigation-drawer
  v-model="drawer"
  app
  color="blue darken-3"
  dark
  elevation="6"
>
  ...
</v-navigation-drawer>

Управление событиями

Компонент поддерживает события:

  • @update:model-value – срабатывает при изменении видимости.
  • @mouseenter и @mouseleave – позволяют реализовать интерактивное раскрытие мини-версии.
  • @click на элементах списка для навигации и выполнения действий.
<v-navigation-drawer
  v-model="drawer"
  @update:model-value="onDrawerToggle"
>
  ...
</v-navigation-drawer>

<script>
export default {
  methods: {
    onDrawerToggle(val) {
      console.log('Панель открыта:', val);
    }
  }
}
</script>

Анимации и переходы

Vuetify автоматически применяет плавные анимации при открытии и закрытии панели. Можно изменять длительность и тип через слоты и пользовательские классы CSS. Для мини-версий эффект расширения при наведении добавляет динамичность интерфейсу.

Эта структура позволяет создавать многоуровневые, адаптивные и стилизованные боковые панели, интегрированные с остальным layout приложения, используя все возможности Vuetify для управления навигацией и пользовательским интерфейсом.

Оглавление