Vue OnDemand

by Sascha

HTML

<div id="navigation">
  <div class="grid">
    <div>
      <ol class="navigation">
        <li class="navigation-header">Report types</li>
        <li class="" v-for="navItem in navigation" v-on:click="toggle(navItem)" v-bind:class="{'active': navItem.active}">
          <label>
          {{ navItem.text }}
      </label>
        </li>
      </ol>
    </div>
    <div>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
}

div.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border: 1px solid #ccc;
}

@media (max-width:500px) {
  div.grid {
    grid-template-columns: 1fr;
  }
}

div.grid>div {
  grid-column: auto;
}

#navigation {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 0;
  padding: 8px;
  width: 100%;
  border: 1px solid #ccc;
  color: #666;
  box-sizing: border-box;
}

ol.navigation li:hover {
  transition: 0.5s ease;
  background-color: #ccc;
  color: black;
}

li.navigation-header {
  background-color: #ccc;
  color: #444;
  font-weight: bold;
}

li.active {
  background-color: #888;
  color: #ccc;
}

Vue

new Vue({
  el: "#navigation",
  data: {
    oldItem: false,
    navigation: [
      { text: "On-Demand", id:0, active: true },
      { text: "Production", id: 1, active: false },
      { text: "Sterilisation", id: 2, active: false },
      { text: "Cleaning", id: 3, active: false },
      { text: "Shift", id: 4, active: false },
      { text: "Batch", id: 5, active: false }
    ]
  },
  created: function() {
    this.oldItem= this.navigation[0];
  },
  methods: {
  	toggle: function(navItem){
      console.log(this.oldItem);
      if (this.oldItem) {
        this.oldItem.active= false;
      }
      this.oldItem=navItem;
    	navItem.active = true;
    }
  }
});