b-collapse: change margin-left content div, when sidebar collapse. this.$root.$on('bv::collapse::state' (true - false)

Hello,

I have a problem with b-collapse, when click on navbar-toggler-icon (burger icon) (v-b-toggle=“‘sidebar-fifi-toggle’”) into div b-navbar, the div sidebar collapase (b-collapse visible id=“sidebar-fifi-toggle”), but the content div remains in original position.

I needed to know how when sidebar collapse when (false), the margin-left of content div set to {margin-left: 0px;}, and when visible (true) set to {margin-left: 185px;}

if (isJustShown == false) {
    css .content div: {margin-left: 0px;}
}
if (isJustShown == true) {
  css .content div: {margin-left: 185px;}
}

link to code sample: https://jsfiddle.net/Lvkjn7he/1/

<div id="app">
 <b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">
<a href="javascript:void(0)" id="menu-toggle" v-b-toggle="'sidebar-fifi-toggle'"><span class="navbar-toggler-icon mb-1 mr-sm-1" aria-hidden="true"></span></a>
    <b-navbar-brand href="index.html">brand
    </b-navbar-brand>

    <b-nav-form>
      <b-form-input type="text" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Username"></b-form-input>
      <b-form-input type="password" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Password"></b-form-input>
      <b-button type="submit" variant="success" class="my-2 my-sm-0">Login</b-button>
    </b-nav-form> 

  </b-navbar>

  <b-collapse visible id="sidebar-fifi-toggle">

    <div class="sidebar bg-white scrollable-menu">
      <ul class="list-unstyled">
        <li>
        <a href="javascript:void(0)" role="button" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-fw fa-address-card"></i> MENU 1</a>
          <ul id="submenu1" class="list-unstyled collapse show">
            <li><b-link :to="{name:'home'}">- Home S</b-link></li>
            <li><b-link :to="{name:'about'}">- About S</b-link></li>
            <li><b-link :to="{name:'contact'}">- Contact S</b-link></li>
          </ul>
        </li>
      </ul>
    </div>
  </b-collapse>     

  <main class="content col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">

    <h1>CONTENT - vue</h1>

</main>

</div>

new Vue({
    el: '#app',
  mounted() {
    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
      if (isJustShown == false) {
        console.log('navbar false:', isJustShown)
      }
      if (isJustShown == true) {
        console.log('navbar true:', isJustShown)

      }
    })
  }
})

#app {
   width: 500px; 
}

.content {
  margin-left: 185px;
  top: 50px;
}

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    width: 190px;
    z-index: 1000;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #eee;
    padding-left: 0;
    padding-right: 0;
    min-height: calc(100vh - 56px);
    transition: all 0.3s;
}

when true:

when false:

any suggestions of how to do it, please

Thanks in advance

[italopm]

Hello, thank for reply, I took your advice, it works fine. I used @click, v-if and :class.

the result is this: https://jsfiddle.net/70wyvfc8/

when clicked on: @click=“burgerMenuSidebar” v-b-toggle=“‘sidebar-fifi-toggle’”:

• when sidebar is open or show:

• when sidebar is hide:

<div id="app">
 <b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">
<a href="javascript:void(0)" id="menu-toggle" @click="burgerMenuSidebar" v-b-toggle="'sidebar-fifi-toggle'"><span class="navbar-toggler-icon mb-1 mr-sm-1" aria-hidden="true"></span></a>
    <b-navbar-brand href="index.html">brand
    </b-navbar-brand>
    
    <b-nav-form>
      <b-form-input type="text" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Username"></b-form-input>
      <b-form-input type="password" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Password"></b-form-input>
      <b-button type="submit" variant="success" class="my-2 my-sm-0">Login</b-button>
    </b-nav-form> 
    
  </b-navbar>
    
  <b-collapse visible id="sidebar-fifi-toggle">
    
    <div v-if="!statusSidebar" class="sidebar bg-white scrollable-menu">
      <ul class="list-unstyled">
        <li>
        <a href="javascript:void(0)" role="button" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-fw fa-address-card"></i> MENU 1</a>
          <ul id="submenu1" class="list-unstyled collapse show">
            <li><b-link :to="{name:'home'}">- Home S</b-link></li>
            <li><b-link :to="{name:'about'}">- About S</b-link></li>
            <li><b-link :to="{name:'contact'}">- Contact S</b-link></li>
          </ul>
        </li>
      </ul>
    </div>
  </b-collapse>     

  <main :class="contentStatusSidebar" class="content col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">

    <h1>CONTENT - vue</h1>

</main>

</div>

new Vue({
  el: '#app',
  props: {
  },
  data() {
    return {
      statusSidebar: false,
    };
  },
  computed: {
    contentStatusSidebar() {
      return this.statusSidebar ? 'sidebarhide' : 'sidebarshow';
    },
  },
  methods: {
    burgerMenuSidebar() {
      this.statusSidebar = !this.statusSidebar;
    },
  },
}); 

#app {
   width: 500px; 
}

.content {
  margin-left: 185px;
  top: 50px;
}

.sidebarshow {
  margin-left: 188px;
}

.sidebarhide {
  margin-left: 0px;
}

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    width: 190px;
    z-index: 1000;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #eee;
    padding-left: 0;
    padding-right: 0;
    min-height: calc(100vh - 56px);
    transition: all 0.3s;
}

all this code works fine on one page.

but not in my separated custom components navbar, sidebar, content.

error: when sidebar is hide: not put class sidebarhide.

i use lasted version: Vue, BootstrapVue, http-vue-loader, vue-router.

I split it up several times, but I couldn’t get it to work

app.js

Vue.use(VueRouter);
Vue.use(httpVueLoader);

"use strict";

const fifinavbar = httpVueLoader("./fifi-navbar.vue");
const fifisidebar = httpVueLoader("./fifi-sidebar.vue");
const fificontent = httpVueLoader("./fifi-content.vue");

const Home = httpVueLoader("./Home.vue");
const Contact = httpVueLoader("./Contact.vue");
const About = httpVueLoader("./About.vue");



/* Router and App setup: */
const routes = [
 {
   path: "/",
   name: "home",
   component: Home
 },
 {
   path: "/contact",
   name: "contact",
   component: Contact
 },
 {
   path: "/about",
   name: "about",
   component: About
 }  
];


const router = new VueRouter({
 routes: routes
});
 

const app = new Vue({
  router: router,
  components: {
    fifinavbar,
    fifisidebar,
    fificontent
  } 
}).$mount("#app");

Vue.config.devtools = true;

fifi-navbar.vue

<template>

  <b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">

    <a href="javascript:void(0)" id="menu-toggle" @click="burgerMenuSidebar" v-b-toggle="'sidebar-fifi-toggle'"><span class="navbar-toggler-icon mb-1 mr-sm-1" aria-hidden="true"></span></a>

    <b-navbar-brand href="index.html">
      BRAND
    </b-navbar-brand>

    <b-navbar-nav class="justify-content-center">
      <b-nav-item :to="{name:'home'}">Home N</b-nav-item>
      <b-nav-item :to="{name:'about'}">About N</b-nav-item>
      <b-nav-item :to="{name:'contact'}">Contact N</b-nav-item>
    </b-navbar-nav>
    
    <b-nav-form>
      <b-form-input type="text" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Username"></b-form-input>
      <b-form-input type="password" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Password"></b-form-input>
      <b-button type="submit" variant="success" class="my-2 my-sm-0">Login</b-button>
    </b-nav-form> 
    
    
  </b-navbar>
</template>

<script> 
module.exports = {
  methods: {
    burgerMenuSidebar() {
      this.statusSidebar = !this.statusSidebar;
    },
  },
}
</script>

<style>

.sidebarshow {
  margin-left: 188px;
}

.sidebarhide {
  margin-left: 0px;
}

</style>

fifi-sidebar.vue

<template>
  <b-collapse visible id="sidebar-fifi-toggle">
    
    <div v-if="!statusSidebar" class="sidebar bg-white scrollable-menu">
      <!-- *********************** Navigation *********************** -->
      <ul class="list-unstyled">
        <li>
        <a href="javascript:void(0)" role="button" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-fw fa-address-card"></i> CONSEGNE</a>
          <ul id="submenu1" class="list-unstyled collapse show">
            <li><b-link :to="{name:'home'}">Home S</b-link></li>
            <li><b-link :to="{name:'about'}">About S</b-link></li>
            <li><b-link :to="{name:'contact'}">Contact S</b-link></li>
          </ul>
        </li>
      </ul>
      <!-- *********************** Navigation *********************** -->

    </div>
   
  </b-collapse>   
</template>

<script> 
module.exports = {
  data() {
    return {
      statusSidebar: false,
    }
  },
}
</script>

<style>


</style>

fifi-content.vue

<template>

  <main :class="contentStatusSidebar" class="content col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">

    <h1>CONTENT - vue - git</h1>
    
     <router-view></router-view>
   
  </main>

</template>

<script> 
module.exports = {
  computed: {
    contentStatusSidebar() {
      return this.statusSidebar ? 'sidebarhide' : 'sidebarshow';
    },
  },
}
</script>

<style>

</style>

index.html

<body>
  
  
  <div id="app">
    
    <fifinavbar></fifinavbar>
    
    <div class="container-fluid">

      <div class="row">

        <fifisidebar></fifisidebar>
        <fificontent></fificontent>
      
      </div>
      
    </div>
    
  </div>

  <script src="app.js"></script>
  
</body>

when clicked on: @click=“burgerMenuSidebar” v-b-toggle=“‘sidebar-fifi-toggle’”:

• when sidebar is open or show: put class sidebarshow (OK)

• error: when sidebar is hide: not put class sidebarhide

any suggestions of how to do it, please

Thanks in advance

[italopm]

Hello, I was able fix.

in fifi-navbar.vue

template:

<a href="javascript:void(0)" id="menu-toggle" @click="burgerMenuSidebar" v-b-toggle="'sidebar-fifi-toggle'"><span class="navbar-toggler-icon mb-1 mr-sm-1" aria-hidden="true"></span></a>

script:

module.exports = {
  name: 'fifinavbar',
  methods: {
    burgerMenuSidebar() {
      this.$parent.$emit('burgerMenuSidebar')
    }
  }
}

in fifi-content.vue

template:

 <main :class="contentStatusSidebar" class="content col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">

script:

module.exports = {

  name: 'fificontent',
  data () {
    return {
      statusSidebar: false
    }
  },
  mounted () {
    this.$parent.$on('burgerMenuSidebar', () => {
      console.log('received emit - fifi')
      this.statusSidebar = !this.statusSidebar
    })
  },
  computed: {
    contentStatusSidebar() {
      return this.statusSidebar ? 'sidebarhide' : 'sidebarshow';
    },
  },
  
}

now two components communicate.

thanks for all.