Navigation drawer

Basic

BNavigationDrawer implements a simple navigation drawer. Bind BNavigationDrawer with v-model to hide and show the content. Set the variant prop to left or right. Defaults to left.

<script setup lang="ts">
import { ref } from 'vue'

const isDrawerShown = ref(false)
const variant = ref('left')
</script>

<template>
  <BNavigationDrawer
    v-model="isDrawerShown"
    index="160"
    :variant="variant"
  >
    <BNavigationDrawerLink
      active
      count="12"
      icon="i-mdi:rocket-launch"
    >
      Units
    </BNavigationDrawerLink>
    <BNavigationDrawerLink icon="i-mdi:lan">
      Networks
    </BNavigationDrawerLink>
    <BNavigationDrawerLink icon="i-mdi:chart-line">
      Statistics
    </BNavigationDrawerLink>
    <BDivider />
    <BNavigationDrawerLink count="99...">
      Error log
    </BNavigationDrawerLink>
  </BNavigationDrawer>

  <div class="flex justify-between">
    <BBtn
      @click="isDrawerShown = true"
    >
      Open
    </BBtn>

    <BSegmentGroup v-model="variant">
      <BSegmentButton value="left">
        Left
      </BSegmentButton>
      <BSegmentButton value="right">
        Right
      </BSegmentButton>
    </BSegmentGroup>
  </div>
</template>