[Vuejs]-Vue.js. How to shift main content when opening a fixed sidebar?

by

0👍

What you can do is keep track if the bar is collapsed or not. If is collapsed you apply some css class to shift the content to the right:

  <sidebar-menu :collapsed="collapsed" theme="white-theme" :menu="menu" />
  
  <div id="main-content">
      <vue-navbar></vue-navbar>

      <!-- adjust 'ml-10' to your needs -->
      <div :class="collapsed ? '' : 'ml-10'" class="container-fluid mt-5">
        <div class="row justify-content-center">
          <div class="col-lg-12">

            <router-view">
            </router-view>

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


      <vue-footer></vue-footer>


  </div>

<script>

export default {
  data(){
    return {
      collapsed: true,
    }
  }
}

</script>

Leave a comment