HorizontalAppBar Component API

The HorizontalAppBar component is a flexible navigation bar that can be positioned in different ways and customized with various content slots.

Props

Prop	Type	Default	Description
logo	String	'data:image/svg+xml;base64,...'	URL or base64 string for the logo image
roundLogo	Boolean	true	Whether to display the logo in a circular shape
title	String	''	Text to display as the app bar title
backgroundColor	String	'#ffffff'	Background color of the app bar
textColor	String	'#444444'	Color of the text in the app bar
height	String	'4rem'	Height of the app bar
elevation	Boolean	true	Whether to show a subtle shadow under the app bar
position	String	'fixed'	Position of the app bar. Options: 'static', 'relative', 'absolute', 'fixed', 'sticky'
top	String | Number	'0rem'	Top position of the app bar (when using fixed/absolute/sticky positioning)
zIndex	String | Number	1000	z-index of the app bar

Slots

Slot	Description
left	Custom content for the left section (replaces the entire left container)
logo	Custom logo content (replaces the default logo)
title	Custom title content (replaces the default title)
left-content	Additional content in the left section
center	Custom content for the center section (replaces the entire center container)
center-content	Content in the center section
right	Custom content for the right section (replaces the entire right container)
right-content	Content in the right section

Events

This component does not emit any events.

CSS Classes

Class	Description
.horizontal-app-bar	Main container class
.left-container	Container for left section content
.logo-container	Container for the logo
.round-logo	Applied to logo container when roundLogo is true
.title	Title text container
.center-container	Container for center section content
.right-container	Container for right section content
.position-fixed	Applied when position is 'fixed'
.position-sticky	Applied when position is 'sticky'
.position-absolute	Applied when position is 'absolute'
.position-relative	Applied when position is 'relative'
.position-static	Applied when position is 'static'

Usage Example

<template>
  <OHorizontalAppBar
    title="My Application"
    :logo="myLogo"
    :round-logo="true"
    background-color="#ffffff"
    text-color="#444444"
    height="4rem"
    :elevation="true"
    position="fixed"
    top="0"
    :z-index="1000"
  >
    <template #left-content>
      <button>Menu</button>
    </template>

    <template #center-content>
      <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </template>

    <template #right-content>
      <button>Login</button>
      <button>Sign Up</button>
    </template>
  </OHorizontalAppBar>
</template>

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

const myLogo = ref("path/to/logo.png");
</script>

Notes

• The component uses CSS Grid for layout with three main sections: left, center, and right
• The logo has a hover effect that slightly scales it up
• The title has a hover effect that reduces opacity
• All positioning options (fixed, sticky, absolute, relative, static) are supported
• The component is fully responsive and adapts to different screen sizes
• The title text will be truncated with an ellipsis if it's too long
• The component uses SCSS for styling with scoped styles to prevent conflicts