Vue Component Library

Appearance

OVerticalAppBar Component Demo ​

This page demonstrates the OVerticalAppBar component with various configurations and examples.

Basic VerticalAppBar ​

A simple vertical app bar with default configuration.

Code Example ​

vue
<template>
  <OVerticalAppBar
    title="My Application"
    :items="navigationItems"
    v-model="isVisible"
    v-model:activeItem="activeItem"
    @logo-click="handleLogoClick"
    @close-click="handleCloseClick"
  />
</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",
      },
    ],
  },
]);

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

const handleCloseClick = () => {
  isVisible.value = false;
};
</script>

Demo ​

Custom Styling ​

App bar with custom colors and styling.

Code Example ​

vue
<template>
  <OVerticalAppBar
    v-model="isVisible"
    title="Custom Styled App Bar"
    :items="navigationItems"
    :elevation="true"
  />
</template>

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

const isVisible = ref(true);

const navigationItems = ref([
  {
    label: "Dashboard",
    value: "dashboard",
    icon: "dashboard-icon.svg",
  }
]);
</script>

Demo ​

App bar with a custom logo and title.

Code Example ​

vue
<template>
  <OVerticalAppBar
    v-model="isVisible"
    :logo="customLogo"
    title="Custom Logo App Bar"
    :roundedLogo="true"
  />
</template>

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

const isVisible = ref(true);
const customLogo = "https://cdn-icons-png.flaticon.com/512/1785/1785213.png";
</script>

Demo ​

Position Examples ​

App bar with different positioning options.

Code Example ​

vue
<template>
  <div class="position-demo">
    <h3>Left Position (Default)</h3>
    <OVerticalAppBar
      v-model="showDemo"
      title="Left Position"
      :items="navigationItems"
      position="left"
    />

    <h3>Right Position</h3>
    <OVerticalAppBar
      v-model="showDemo"
      title="Right Position"
      :items="navigationItems"
      position="right"
    />
  </div>
</template>

Demo ​

Expandable Behavior ​

App bar with different expandable behaviors.

Code Example ​

vue
<template>
  <div class="expand-demo">
    <h3>Expand on Hover</h3>
    <OVerticalAppBar
      v-model="showDemo"
      title="Hover Expand"
      :items="navigationItems"
      :expandOnHover="true"
      :persistIconsOnHide="true"
    />

    <h3>Expand on Click</h3>
    <OVerticalAppBar
      v-model="showDemo"
      title="Click Expand"
      :items="navigationItems"
      :expandOnClick="true"
      :persistIconsOnHide="true"
    />
  </div>
</template>

Demo ​

Custom Navigation Items ​

App bar with custom navigation items and styling.

Code Example ​

vue
<template>
  <OVerticalAppBar
    v-model="showDemo"
    title="Custom Navigation"
    :items="navigationItems"
    :multiExpand="true"
    :showChevron="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>

<style>
.custom-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-item.active {
  background-color: rgba(0, 0, 0, 0.1);
}

.nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-label {
  font-size: 0.875rem;
}
</style>

Demo ​