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