:bookmark_tabs: vue-bootstrap-sidebar :bookmark_tabs:

vue-bootstrap-sidebar is a Vue sidebar menu component, build using bootstrap-vue.

Be sure to check out the Sidebar component in BootstrapVue firtst. My implementation is older, much simpler, but still in active development.

Preview

For the preview just clone this repository and run dev server.

git clone https://github.com/thiagopinto/vue-bootstrap-sidebar.git

cd vue-bootstrap-sidebar

npm install

npm run serve

Installation & integration to Vue app

NOTE: I assume, that You are already building Vue application with bootstrap. If not, You will need to install and configure bootstrap-vue.

NOTE: If You want to use Font Awesome icons, be sure that you have installed and configured vue-fontawesome.

Installation from npm registry

You can use npm

npm install vue-bootstrap-sidebar

or yarn

yarn add vue-bootstrap-sidebar

Integration to the project

BootstrapSidebar component is a wrapper for a whole page with two named slots:

• navbar - slot for your top navbar component
• logo-mini - slot for insert logo in header
• content - slot for the entire content of your page
• footer - slot for your down navbar componet

It is up to You, how Your top navbar component and content looks like. As we are using bootstrap, it is good if a whole webpage follows bootstrap patterns.

Except that, styles needs to be imported.

<style lang="scss">
  @import 'node_modules/vue-bootstrap-sidebar/src/scss/default-theme.scss';
</style>

So, Your main app component should look like on this example:

<script>
import Vue from 'vue'
import BootstrapSidebar from 'vue-bootstrap-sidebar'

export default Vue.extend({
  name: 'App',
  components: {
    BootstrapSidebar
  },
  data () {
    return {
      initialShow: true,
      header: '<h3>Sidebar</h3>',
      links: [
        { name: 'Home', href: { name: 'home' }, faIcon: ['fas', 'home'] },
        {
          name: 'Dropdown',
          faIcon: ['fas', 'tint'],
          children: [
            {
              name: 'Child Item 1',
              href: {
                name: 'child-item-1'
              },
              faIcon: ['fas', 'child']
            },
            {
              name: 'Child Item 2',
              href: {
                name: 'child-item-2'
              },
              faIcon: ['fas', 'child']
            }
          ]
        },
        { name: 'About', href: { name: 'about' }, faIcon: 'users' },
        { name: 'Contact', href: { name: 'contact' }, faIcon: 'phone' }
      ]
    }
  },
  methods: {
    onSidebarChanged () {
    }
  }
})
</script>

<template>
  <div id="App">
    <BootstrapSidebar
      :initial-show="initialShow"
      :links="links"
      :header="header"
      :fa="true"
      @sidebarChanged="onSidebarChanged"
    >
      <template v-slot:navbar>
        <b-navbar
          id="mainNavbar"
          toggleable="lg"
          type="light"
          variant="light"
          fixed="top"
        >
          <b-navbar-nav>
            <b-nav-item>
              Navbar
            </b-nav-item>
          </b-navbar-nav>
        </b-navbar>
      </template>

      <template v-slot:content>
        <b-container style="margin-top: 56px">
          <router-view />
        </b-container>
      </template>
    </BootstrapSidebar>
  </div>
</template>

<style lang="scss">
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
@import 'node_modules/vue-bootstrap-sidebar/src/scss/default-theme';
</style>

Configuration (props)

Configuration options (props) of the BootstrapSidebar are:

• initialShow - true/false if the sidebar is initially visible or not (default: true)
• header - header for the sidebar. You can also use html tags like h3, strong, etc.
• links - array of menu items.
  • href propery is rendered with router-link.
  • children property is rendered as dropdown with defined child.
  • faIcon renders Font Awesome icon, lef to the menu item. For this feature, You need to install vue-fontawesome. You can provide icon as array e.g. ['fas', 'user'] or as string e.g.'user'.
• theme - custom scss theme (default: default-theme).

TODOs

• write tests

Notes

• npm package is created with vue-sfc-rollup