<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>