vue-bs-drawer

Vue.js sidebar / drawer component using bootstrap 4 classes.

See example here

Getting Started

Prerequisites

You will need to install Bootstrap 4 in your project. You can install using the instructions on the Bootstrap homepage.

Or (recommended) just use the BootstrapVue package.

Installing

Install the via NPM

npm install --save vue-bs-drawer

Register component globally

// Your entry main.js
import Vue from 'vue'
import App from './App'

import VueBsDrawer from 'vue-bs-drawer'

Vue.component('bs-drawer', VueBsDrawer)

or register locally in your .vue file

Example

<template>
  <div id='mycomponent'>>
    <div class="container-fluid">
      <div class="row">
        <bs-drawer v-on:bs-drawer-opened="closeRight"
          ref="leftDrawer"
          side="left"
          :showDrawer="false"
          :showToggleBtn="true"
          btnTop="195px"
          bg="transparent"
          sidebar="md"
          class="col-10 col-sm-3 col-md-3 col-lg-2 bs-drawer__animate">
          <!-- Add some nav elements here-->
        </bs-drawer>

        <div class="px-4 col-12 col-md-9 col-lg-10 offset-md-3 offset-lg-2">
          <!-- Main View here -->
          <router-view></router-view>
        </div>
        <!-- Add another drawer on the other side if needed -->
        <bs-drawer
          ref="rightDrawer"
          side="right"
          :showDrawer="false"
          :btnTop="0"
          class="col-9 col-sm-8 col-md-4 col-lg-4 col-xl-2 bs-drawer__animate">
          <!-- Add some nav elements here-->
        </bs-drawer>

      </div>
    </div>
  </div>
  </div>
</template>

<script>
import 'VueBsDrawer' from 'vue-bs-drawer'
export default {
  components: {
    'bs-drawer': VueBsDrawer
  },
  data () {
    return {
       msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

Sizing

Use standard Bootstrap col-* classes in the component to size the drawer. e.g.

<bs-drawer v-on:bs-drawer-opened="closeRight"
  side="left"
  class="col-10 col-sm-3 col-md-3 col-lg-2 bs-drawer__animate">
  <!-- Add some nav elements here-->
</bs-drawer>

Responsive Sidebar

Use the sidebar=<size> property to display as a responsive sidebar. Sizes include sm, md & lg.

Then adjust your main content with the correct Bootstrap offset classes. E.g. for size="md and a col-md-3 size, use an offset of offset-md-3.

This will automatically hide your sidebar when the screen size is smaller than the Bootstrap md breakpoint. e.g.

...
<bs-drawer v-on:bs-drawer-opened="closeRight"
  side="left"
  sidebar="md"
  class="col-10 col-sm-3 col-md-3 bs-drawer__animate">
  <!-- Add some nav elements here-->
</bs-drawer>
<div class="px-4 col-12 col-md-9 col-lg-10 offset-md-3">
  <!-- Main View here -->
  <router-view></router-view>
</div>
...

Contributing

serve with hot reload at localhost:8080

npm run dev

distribution build with minification

npm run build

build the docs into gh-pages

npm run build:docs

run unit tests

npm run test:unit

Authors

• Jason Kroll - Initial work - vue-bs-drawer

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Inspired by and based on the work done by asyraf9 with the bootstrap-sidebar