Builderall Vue UI

# BUINavbar

Top header and popup component of the user profile. Contains the button that changes the status of the sidebar and also the language change field of the application.

# Demo

# Code

<template>
  <bui-navbar
    logo="https://booking.builderall.com/images/images/meta/logo.png"
  />
</template>

# Full example

# Demo

# Code

<template>
  <bui-navbar
    :sidebar-state="sidebarState"
    logo="https://booking.builderall.com/images/images/meta/logo.png"
    logo-sm="https://booking.builderall.com/images/images/meta/logo-icon.png"
    label-favorite-lang="Idioma preferido"
    label-logout="Exit"
    home-link="/home"
    :user="user"
    :languages="languages"
    @logout="doSomething"
    @change-language="doSomething"
    @toggle-sidebar="doSomething"
  >
    <template #items-right>
      #items-right
    </template>
    <template #dropdown-item-before>
      <b-dropdown-item
        tabindex="-1"
        link-class="py-2"
      >
        <bui-icon
          name="plus"
          class="mx-3"
        />
        #dropdown-item-before
      </b-dropdown-item>
      <b-dropdown-divider />
    </template>
    <template #dropdown-item-after>
      <b-dropdown-item
        tabindex="-1"
        link-class="py-2"
      >
        <bui-icon
          name="gear"
          class="mx-3"
        />
        #dropdown-item-after
      </b-dropdown-item>
    </template>
  </bui-navbar>
</template>

<script>
export default {
  data () {
    return {
      sidebarState: 'expanded',
      user: {
        name: 'Mauricio Testa',
        email: 'mauriciotesta@gmail.com',
        locale: 'pt_BR',
        gravatar:
          'https://secure.gravatar.com/avatar/2253502b4562dad48c2c74681c459dd1'
      },
      languages: [
        { key: 'pt_BR', desc: 'Português (Brasil)' },
        { key: 'en_US', desc: 'English' },
        { key: 'fr_FR', desc: 'Français' },
        { key: 'de_DE', desc: 'Deutsch' }
      ]
    }
  },
  methods: {
    doSomething () {}
  }
}
</script>

# API Reference

# Events

Name Args Description
toggle-sidebar The new state of the sidebar (possible values: 'expanded', 'mini', 'disabled') Event emitted when clicking on the hamburger menu. You must listen to this event to change the sidebar-state value
change-language Selected language (Ex: en_US) Event emitted when changing language at dropdown. After that, the new language must be saved and the page reloaded
logout Issued when clicked on the Logout button

# Props

Property Type Default Description
user Object {name: 'The user name',email: 'mail@builderall.com', gravatar: '...', locale: 'pt_BR'} Object referring to the logged user data. He must have the keys name, email, gravatar, locale
sidebar-state String 'expanded' Sidebar state. Used to display the open or closed hamburger menu (possible values: 'expanded', 'mini', 'disabled')
logo String null Application logo URL
logo-sm String null Application logo URL on mobile
label-favorite-lang Number 'Your favorite lang' "Preferred language" label in the user's popup
label-logout String 'Logout' Label "logout" in the user's popup
home-link String '/' Application home link when clicking on the logo
languages Array An array of languages [{key: 'pt_BR', desc: 'Português (Brasil)'}, ...] List of available languages. You can customize this list to provide only languages that have translations. Every language must have a key and a desc
sidebar-mobile-id String bui-sidebar-mobile Related mobile sidebar ID. It must be the same in the bui-navbar and bui-sidebar. If your application has only one sidebar you don't have to worry about this property

# Slots

Name Description
items-right Space for icons in the header
dropdown-item-before Space for dropdown items before language selector
dropdown-item-after Space for dropdown items after language selector

← Sidebar →