Left fixed sidebar with animated left sidebar in vuejs - vue.js

Question

im developing first vuejs application with bootstrap vue and actually im stuck on one thing. My master page contains left fixed sticky sidebar where i have two icons as menu link. The goal is when i click on any menu link i need the left sidebar to pop up (animation from left to right). Something like submenu with 100% height and custom width.
For the left fixed sidebar I used whole bootstrap grid system. Now im trying to implement bootstrap sidebar which will be animated with offset left margin so that it starts from the right edge of the fixed sidebar. The problem what i have now is that the animation goes through the fixed sidebar.
How to achieve this? Should i used sidebar component from bootstrap vue or implement pure html div element and control its animation? Should i play with z-index?
MasterView.vue
<template>
<b-row class="h-100 m-0">
<Menubar msg=""></Menubar>
<b-col id="content">
<router-view />
</b-col>
</b-row>
</template>
<script>
import Menubar from '#/components/Menubar.vue'
export default {
name: 'master',
components: {
Menubar
}
}
</script>
Menubar.vue
<template>
<b-col id="menubar" class="align-self-center"
>{{ msg }}
<div :class="[currentPage.includes('sms-template') ? activeClass : '', 'text-center py-3']">
<b-button variant="link" v-b-toggle.sidebar-footer>
<feather type="message-square" class="menu-icons"></feather>
</b-button>
<b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header>
<template v-slot:footer="{ hide }">
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
<strong class="mr-auto">Footer</strong>
<b-button size="sm" #click="hide">Close</b-button>
</div>
</template>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
</div>
</b-sidebar>
</div>
</b-col>
</template>
<script>
export default {
name: 'Menubar',
props: {
msg: String
},
data() {
return {
activeClass: 'menu-active'
}
}
}
</script>
App.vue (css)
<style>
#import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
* {
outline-style: none;
}
html,
body,
.tooltip-inner {
font-family: 'Roboto';
/*font-size: 0.87em;*/
font-size: 0.875rem;
font-weight: 400;
}
#menubar {
-ms-flex: 0 0 80px;
flex: 0 0 80px;
padding: 0;
z-index: 1000px;
}
#content {
background-color: #f5f5f5;
}
/* Icon links behavior */
.menu-icons {
width: 20px;
height: 20px;
vertical-align: middle;
}
.menu-active {
background-color: #f5f5f5;
}
.icon-link {
color: #aab0b7;
}
.icon-link:hover {
color: #2699fb;
}
.router-link-exact-active {
color: #0060a1;
}
.b-sidebar:not(.b-sidebar-right) {
left: 80px;
}
.bg-light {
background-color: #fcfcfc !important;
}
.b-sidebar-outer {
z-index: 5;
}
</style>