<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="user d-flex justify-content-center">
      <div class="userinfo">
      {{ userinfo }}
    </div>
    <div class="logout">
      <span @click="logoff"><i class="fa fa-power-off"></i></span>
    </div>
    </div>
  </div>
</template>

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

export default {
  name: "sidebar",
  computed: {
    ...mapGetters("user", ["userinfo"]),
    sidebarStyle() {
      return {
        sidebarcollapsed: this.collapsed,
        sidebarextended: this.collapsed
      };
    }
  },
  methods: {
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$router.push("/login");
    }
  },
  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;
}

.user {
  position: absolute;
  left: 0;
  bottom: $large-offset;
  width: 90px;
}

.userinfo {
  font-weight: bold;
}

.logout {
  margin-left: $small-offset;
}
</style>