Builderall Vue UI

# BUISidebar

Sidebar of the application for desktop and mobile. It contains the menus and can be presented in two states: expanded, when an icon and description are displayed; and mini, when only icons are displayed and descriptions become tooltip.
It has three menu areas: the main, bottom and mobile and you can customize the items for each one.

# Demo

# Code

<template>
  <bui-sidebar
    :menus="menusTop"
    :menus-bottom="menusBottom"
  />
</template>

<script>
export default {
  data () {
    return {
      menusTop: [{ title: 'Dashboard', icon: 'dashboard', href: '#' }],
      menusBottom: [{ title: 'Office', icon: 'logo', href: '#' }]
    }
  }
}
</script>

TIP

If you don't set the sidebar-state property, by default it will be 'expanded'. To disable the sidebar, set the sidebar-state property to disabled

# Full example

# Demo

# Code

<template>
  <div>
    <bui-sidebar
      sidebar-mobile-id="sidebar-example-complete"
      :sidebar-state="state"
      active-menu="sites"
      :user="user"
      :menus="menus"
      :menus-bottom="menus_bottom"
      :menus-mobile="menus_mobile"
      settings-href="/settings"
    />

    <div class="my-3">
      <b-button
        v-b-toggle.sidebar-example-complete
        class="mx-1"
      >
        mobile
      </b-button>
      <b-button
        class="mx-1"
        @click="state = 'mini'"
      >
        mini
      </b-button>
      <b-button
        class="mx-1"
        @click="state = 'expanded'"
      >
        expanded
      </b-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      state: 'expanded',
      user: {
        name: 'Mauricio Testa',
        email: 'mauriciotesta@gmail.com',
        locale: 'pt_BR',
        gravatar:
          'https://secure.gravatar.com/avatar/2253502b4562dad48c2c74681c459dd1'
      },
      menus: [
        { title: 'Dashboard', routes: ['dashboard'], icon: 'dashboard', href: '/' },
        { title: 'Sites', routes: ['sites'], name: 'config', icon: 'gear', href: '/' }
      ],
      menus_bottom: [{ title: 'Office', icon: 'logo', href: '#' }],
      menus_mobile: [{ title: 'Mobile!', icon: 'lang', href: '#' }]
    }
  }
}
</script>

# Active menu

There are 3 ways to define which menu will be active when using bui-sidebar:

# 1 - By route name

The menu will be active if the active-menu property of the bui-sidebar is equal to any of the items in the array entered in the routes key of the menu object:



 


<bui-sidebar 
	:menus="menus"
	active-menu="sites"
/>


 



menus = [{
	title: 'Sites',
	routes: ['sites'], 
	icon: 'gear'
}]

# 2 - By prefix

The menu will be active if the active-menu property starts with the prefix entered in the prefix key of the menu object. This mode is great when using laravel's Resource Controllers (opens new window).



 


<bui-sidebar 
	:menus="menus"
	active-menu="sites.create"
/>


 



menus = [{
	title: 'Sites',
	prefix: 'sites.', 
	icon: 'gear'
}]

# 3 - Explicitly

You can explicitly specify that you want a menu to be active by passing a Boolean value in the active key of the menu object. This is the most flexible way of all because you define the rules to activate the menu you want. In this case, the active-menu property is not required.



 



menus = [{
	title: 'Sites',
	active: true, 
	icon: 'gear'
}]

# Rules priority

  1. menu.active. If this property is present, it will be used and will take precedence over other
  2. menu.prefix. Otherwise, if the property menu.prefix is present and both it and the active-menu are a String, the rule will be executed
  3. menu.routes. Otherwise, if the property menu.routes is present and is an Array, it will be executed.
  4. If all of the above rules fail, it will return false

# Vue Router

In case of using the Vue Router (opens new window), it is not necessary to set the active-menu property in any of the activation modes, because the menus are activated automatically through the automatic classes router-link-exact-active and router-link-active. It is also not necessary to inform menu.active, menu.prefix and menu.routes. Instead, you can specify menu.exact to match the exact router-link property.

# Demo

# Code

<template>
  <bui-sidebar
    active-menu="sites.create"
    :menus="menus"
  />
</template>

<script>
export default {
  data () {
    return {
      menus: [
        // inactive
        {
          title: '/home',
          routes: ['home'],
          icon: 'dashboard',
          href: '#'
        },
        // example prefix
        {
          title: '/sites',
          prefix: 'sites.',
          icon: 'gear',
          href: '#'
        },
        {
          title: '/sites/create',
          prefix: 'sites.',
          icon: 'gear',
          href: '#'
        },
        // example routes
        {
          title: '/sites/create',
          routes: ['sites.create'],
          icon: 'gear',
          href: '#'
        },
        // example explicitly
        {
          title: '/does/not/matter',
          active: true,
          icon: 'gear',
          href: '#'
        }
      ]
    }
  }
}
</script>

The menu items in the bui-sidebar support links of the type <inertia-link>, <router-link> and traditional href. If the item does not have any of these types of links, the BUISidebarItem component will issue a validation error on the console.

Using href:




 
 


menus = [{
	title: 'Menu item',
	icon: 'gear'
	href: 'http://builderall.com',
	target: '_blank', // optional
}]

Using <inertia-link>:




 


menus = [{
	title: 'Sites',
	icon: 'gear'
	inertia: this.$route('sites'),
}]

Using <router-link>:




 


menus = [{
	title: 'Menu item',
	icon: 'gear'
	to: '/sites',
}]

# Customizing menu items

It is possible to customize the content of the items in the main, bottom and mobile areas separately using the slots.

# Demo

# Code

<template>
  <div>
    <bui-sidebar
      sidebar-mobile-id="example-sidebar-slots"
      sidebar-state="expanded"
      :menus="menus"
      :menus-bottom="menus_bottom"
    >
      <template #item="{ menu }">
        <template v-if="menu.name == 'config'">
          Hello config menu!
        </template>
        <template v-else>
          {{ menu.title }} <b-badge class="mr-1">
            {{ menu.icon }}
          </b-badge>
        </template>
      </template>
      <template #item-bottom="{ menu }">
        <bui-icon
          :name="menu.icon"
          class="mr-3"
        />
        {{ menu.title }}
        <b-badge> Buuh!</b-badge>
      </template>
      <template #item-mobile="{ menu }">
        {{ menu.title }} <b-badge> {{ menu.icon }}</b-badge>
      </template>
    </bui-sidebar>

    <b-button
      v-b-toggle.example-sidebar-slots
      class="mt-3"
    >
      Mobile
    </b-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menus: [
        { title: 'Dashbard', icon: 'dashboard', href: '/' },
        { title: 'Contacts', icon: 'user', to: '/sites' },
        { title: 'Configs', icon: 'gear', href: '/' }
      ],
      menus_bottom: [
        {
          title: 'Office',
          icon: 'logo',
          href: '#',
          target: '_blank'
        }
      ]
    }
  }
}
</script>

# API Reference

# 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. (possible values: 'expanded', 'mini', 'disabled')
active-menu String null The current active menu (You can use Route::currentRouteName() on Laravel)
menus Array [] Array of menus to display in main sidebar area
menus-bottom Array [] Array of menus to display in bottom sidebar area
menus-mobile Array menus.concat(menusBottom) Array of menus to display in mobile sidebar. If not defined, a concatenation between menus e menus-bottom will be displayed
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
settings-href String undefined Link assigned to the mobile sidebar settings icon

# Slots

Name Description
item Slot for customizing items in the main sidebar area
item-bottom Slot for customizing items in the bottom sidebar area
item-mobile Slot for customizing items in the mobile sidebar

← Container →