Vue- collapsible left nav using float

by Joe Saad

HTML

<div id="app">
<div :class="'container ' + [collapsed ? 'collapsed' : '']">
  {{collapsed}}
  <div class="side-bar">
    <button @click="collapsed= !collapsed">toggle</button>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ex cum velit beatae magnam repudiandae amet necessitatibus vel at atque? Earum maiores deleniti illo facere ad nobis, illum sunt velit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ex cum velit beatae magnam repudiandae amet necessitatibus vel at atque? Earum maiores deleniti illo facere ad nobis, illum sunt velit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ex cum velit beatae magnam repudiandae amet necessitatibus vel at atque? Earum maiores deleniti illo facere ad nobis, illum sunt velit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ex cum velit beatae magnam repudiandae amet necessitatibus vel at atque? Earum maiores deleniti illo facere ad nobis, illum sunt velit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ex cum velit beatae magnam repudiandae amet necessitatibus vel at atque? Earum maiores deleniti illo facere ad nobis, illum sunt velit.</p>
  </div>
</div>
  
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  .container{
    &.collapsed{
      .side-bar{
        width: 5px;
      }
      .content{
        width: calc(100% - 65px);
      }
    }
    >div{
      //margin: 0 10px;
      padding: 0 10px;
      float: left;
    }
    .side-bar{
      border-right: 1px solid blue;
      width: 30px;
      background: #ccc;
    }
    .content{
      border: 1px solid red;
      width: calc(100% - 90px);
      z-index: 20;
      background: #fff;
    }
  }
  float: left;
}

Vue

new Vue({
  el: "#app",
  data: {
    collapsed: false
  }
})