<template>
  <div class="sidebar">
    <nav class="nav flex-column">
      <a class="nav-link active" href="#">Active</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link disabled" href="#">Disabled</a>
    </nav>
    <div class="userinfo">
      {{ userinfo }}
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "sidebar",
  computed: {
    ...mapGetters("user", ["userinfo"]),
    sidebarStyle() {
      return {
        sidebarcollapsed: this.collapsed,
        sidebarextended: this.collapsed
      };
    }
  },
  data() {
    return {
      collapsed: false
    };
  }
};
</script>

<style lang="scss">
@import "../assets/application.scss";

$sidebar-full-width: 150px;

$sidebar-collapsed-width: 80px;

.sidebar {
  padding-top: $large-offset;
}

.sidebarcollapsed {
  width: $sidebar-collapsed-width;
}

.sidebarextended {
  width: $sidebar-full-width;
}
</style>