<template>
  <div id="sidebar-wrapper" class="border-right">
    <div class="sidebar-header">
      KEA
    </div>
    <ul class="list-group list-group-flush">
      <li>
        <router-link :to="{ name: 'panel.dashboard' }">
          Dashboard
        </router-link>
      </li>
      <h6 class="text-center pt-3">
        Monitor
      </h6>
      <li>
        <router-link :to="{ name: 'panel.components.mltd' }">
          MLTD
        </router-link>
      </li>
      <li>
        <router-link :to="{ name: 'panel.components.od' }">
          OD
        </router-link>
      </li>
      <li>
        <router-link :to="{ name: 'panel.components.ceptd' }">
          CEPTD
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Sidebar'
}
</script>

<style scoped>
  #sidebar-wrapper {
    background: #4876d5;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
  }

  .sidebar-header {
    padding: 12px;
    font-size: 1.35rem;
    text-align: center;
  }

  #sidebar-wrapper ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
  }
  #sidebar-wrapper ul li a:hover {
    color: #5197fa;
    background: #fff;
  }

  #sidebar-wrapper ul a.router-link-exact-active {
    color: #fff;
    background: #5197fa;
  }
</style>