39 lines
1.4 KiB
Vue
39 lines
1.4 KiB
Vue
<template>
|
|
<nav v-if='user' v-bind:class='collapsed ? "collapsed" : "expanded"'>
|
|
<h1 class=logo>
|
|
<span class=expanded>Personal Measure</span>
|
|
<span class=collapsed>PM</span>
|
|
</h1>
|
|
<!--<router-link to="/dashboard">
|
|
<fa-icon icon=home></fa-icon>
|
|
<span class=expanded>Dashboard</span>
|
|
</router-link>-->
|
|
<router-link to="/measures">
|
|
<fa-icon icon=pencil-ruler></fa-icon>
|
|
<span class=expanded>Measures</span>
|
|
<div class="submenu expanded">
|
|
<router-link v-for="(measure, slug) in measures" :key="slug"
|
|
:to="'/measures/' + slug">
|
|
{{measure.name}}
|
|
</router-link>
|
|
</div>
|
|
</router-link>
|
|
<router-link to="/quick-panels">
|
|
<fa-icon icon=th-large></fa-icon>
|
|
<span class=expanded>Quick Panels</span>
|
|
</router-link>
|
|
<router-link to="/user-account">
|
|
<fa-icon icon=user></fa-icon>
|
|
<span class=expanded>Your Account</span>
|
|
</router-link>
|
|
<div class=collapse-handle tabindex="0"
|
|
v-on:click='toggleCollapsed()'
|
|
v-on:keypress='toggleCollapsed()'>
|
|
<span class=collapsed><fa-icon icon=angle-double-right></fa-icon></span>
|
|
<span class=expanded><fa-icon icon=angle-double-left></fa-icon></span>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
<script lang="ts" src="./nav-bar.ts"></script>
|
|
<style lang="scss" src="./nav-bar.scss"></style>
|