Vue.js sidebar / drawer component using bootstrap 4 classes.
See example here
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.
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
<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>
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>
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>
...
npm run dev
npm run build
npm run build:docs
npm run test:unit
This project is licensed under the MIT License - see the LICENSE.md file for details
Inspired by and based on the work done by asyraf9 with the bootstrap-sidebar