OVerticalAppBar API Reference

Props

Prop	Type	Default	Description
elevation	Boolean	true	Whether to show elevation/shadow
floating	Boolean	true	Whether the app bar should float
sticky	Boolean	true	Whether the app bar should be sticky
logo	String	''	URL or SVG string for the logo
roundedLogo	Boolean	false	Whether to show rounded logo
title	String	''	Title text
showCloseButton	Boolean	true	Whether to show close button
modelValue	Boolean	true	Controls visibility of the app bar (v-model)
persistIconsOnHide	Boolean	true	Whether to show icons when collapsed
expandOnHover	Boolean	false	Whether to expand on hover
expandOnClick	Boolean	true	Whether to expand on click
overlay	Boolean	true	Whether to show overlay backdrop
position	String	'left'	Position of the app bar ('left' or 'right')
items	Array	[]	Navigation items array
activeItem	String	''	Currently active item (v-model)
showChevron	Boolean	true	Whether to show chevron icons
multiExpand	Boolean	true	Whether to allow multiple expanded sections

Navigation Items Structure

Each item in the items array should have the following structure:

Property	Type	Required	Description
label	String	Yes	Display text for the navigation item
value	String	Yes	Unique identifier for the item
icon	String	No	URL or SVG string for the item icon
children	Array	No	Array of child items (supports nested levels)

Example:

const items = [
  {
    label: "Dashboard",
    value: "dashboard",
    icon: "dashboard-icon.svg",
  },
  {
    label: "Settings",
    value: "settings",
    icon: "settings-icon.svg",
    children: [
      {
        label: "Profile",
        value: "profile",
        icon: "profile-icon.svg",
      },
      {
        label: "Security",
        value: "security",
        children: [
          {
            label: "Password",
            value: "password",
          }
        ]
      }
    ]
  }
]

Events

Event	Payload	Description
logoClick	-	Emitted when logo is clicked
closeClick	-	Emitted when close button is clicked
titleClick	-	Emitted when title is clicked
update:modelValue	Boolean	Emitted when visibility changes (v-model)
update:activeItem	String	Emitted when active item changes (v-model)

Slots

Slot	Props	Description
default	-	Main content slot
prepend	-	Header section slot
logo	{ handleLogoClick: Function }	Logo slot with click handler
title	{ handleTitleClick: Function }	Title slot with click handler
closeBtn	{ handleCloseClick: Function }	Close button slot with click handler
content	-	Navigation items content slot
append	-	Footer section slot

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OVerticalAppBar
    title="My App"
    :items="navigationItems"
    @logo-click="handleLogoClick"
    @close-click="handleCloseClick"
  />
</template>

<script setup>
import { ref } from "vue";
import { OVerticalAppBar } from "your-component-library";

const navigationItems = ref([
  {
    label: "Dashboard",
    value: "dashboard",
    icon: "dashboard-icon.svg",
  },
  {
    label: "Settings",
    value: "settings",
    icon: "settings-icon.svg",
    children: [
      {
        label: "Profile",
        value: "profile",
        icon: "profile-icon.svg",
      },
      {
        label: "Security",
        value: "security",
        icon: "security-icon.svg",
      },
    ],
  },
]);

const handleLogoClick = () => {
  console.log("Logo clicked");
};

const handleCloseClick = () => {
  console.log("Close clicked");
};
</script>

With Custom Logo and Title

<template>
  <OVerticalAppBar
    :logo="customLogo"
    :rounded-logo="true"
    title="Custom App"
    :title-color="'#4a90e2'"
  >
    <template #logo="{ handleLogoClick }">
      <div class="custom-logo" @click="handleLogoClick">
        <img :src="customLogo" alt="Custom Logo" />
      </div>
    </template>
  </OVerticalAppBar>
</template>

<script setup>
import { ref } from "vue";
import { OVerticalAppBar } from "your-component-library";

const customLogo = ref("path/to/your/logo.svg");
</script>

With Custom Navigation Items

<template>
  <OVerticalAppBar
    :items="navigationItems"
    :multi-expand="true"
    :show-chevron="true"
  >
    <template #content>
      <div class="custom-navigation">
        <div
          v-for="item in navigationItems"
          :key="item.value"
          class="nav-item"
          :class="{ active: item.value === activeItem }"
          @click="handleItemClick(item)"
        >
          <img :src="item.icon" :alt="item.label" class="nav-icon" />
          <span class="nav-label">{{ item.label }}</span>
        </div>
      </div>
    </template>
  </OVerticalAppBar>
</template>

<script setup>
import { ref } from "vue";
import { OVerticalAppBar } from "your-component-library";

const navigationItems = ref([
  {
    label: "Home",
    value: "home",
    icon: "home-icon.svg",
  },
  {
    label: "Products",
    value: "products",
    icon: "products-icon.svg",
    children: [
      {
        label: "Categories",
        value: "categories",
        icon: "categories-icon.svg",
      },
      {
        label: "Inventory",
        value: "inventory",
        icon: "inventory-icon.svg",
      },
    ],
  },
]);

const activeItem = ref("home");

const handleItemClick = (item) => {
  activeItem.value = item.value;
};
</script>

With Custom Close Button

<template>
  <OVerticalAppBar title="Custom Close" :show-close-button="true">
    <template #closeBtn="{ handleCloseClick }">
      <button class="custom-close-btn" @click="handleCloseClick">
        <span class="close-icon">×</span>
        <span class="close-text">Close Panel</span>
      </button>
    </template>
  </OVerticalAppBar>
</template>

<style scoped>
.custom-close-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

.close-icon {
  font-size: 1.5rem;
}

.close-text {
  font-size: 0.875rem;
}
</style>

With Nested Navigation Items

<template>
  <OVerticalAppBar
    title="My App"
    :items="navigationItems"
    v-model="isVisible"
    v-model:activeItem="activeItem"
  />
</template>

<script setup>
import { ref } from "vue";

const isVisible = ref(true);
const activeItem = ref("dashboard");

const navigationItems = ref([
  {
    label: "Dashboard",
    value: "dashboard",
    icon: "dashboard-icon.svg",
  },
  {
    label: "Settings",
    value: "settings",
    icon: "settings-icon.svg",
    children: [
      {
        label: "Profile",
        value: "profile",
        icon: "profile-icon.svg",
      },
      {
        label: "Security",
        value: "security",
        icon: "security-icon.svg",
        children: [
          {
            label: "Password",
            value: "password",
          },
          {
            label: "Two-Factor",
            value: "two-factor",
          }
        ]
      }
    ]
  }
]);
</script>