<template>
  <div :class="sidebarStyle">
    <nav :class="menuStyle">
      <router-link to="/" class="d-flex nav-link">Riverbed Morphology</router-link>
      <a class="d-flex nav-link" href="#">Link</a>
      <a class="d-flex nav-link" href="#">Link</a>
      <div v-if="isSysAdmin">
        <hr/>
        <div class="d-flex menupadding text-muted">Administration</div>
        <router-link class="d-flex nav-link" to="users">Users</router-link>
      </div>
    </nav>
    <div :class="userinfoStyle">
      <div class="menupadding userinfo">
        <img class="userpic" src="../assets/user.png">
        <span class="username">{{ userinfo }}</span>
      </div>
      <div>
        <span class="logout" @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", "isSysAdmin"]),
    ...mapGetters("application", ["sidebarCollapsed"]),
    menuStyle() {
      return {
        menu: true,
        nav: true,
        "flex-column": true,
        "visibility-extended": !this.sidebarCollapsed,
        "visibility-collapsed": this.sidebarCollapsed
      };
    },
    userinfoStyle() {
      return {
        user: true,
        "d-flex": true,
        "visibility-extended": !this.sidebarCollapsed,
        "visibility-collapsed": this.sidebarCollapsed
      };
    },
    collapseStyle() {
      return {
        collapser: true,
        collapserextended: !this.sidebarCollapsed,
        collapsercollapsed: this.sidebarCollapsed
      };
    },
    sidebarStyle() {
      return {
        sidebar: true,
        overlay: true,
        sidebarcollapsed: this.sidebarCollapsed,
        sidebarextended: !this.sidebarCollapsed,
        shadow: true
      };
    }
  },
  methods: {
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$router.push("/login");
    }
  }
};
</script>

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

$sidebar-full-width: 210px;
$collapser-left-offset: 170px;
$sidebar-collapsed-width: 0px;

.menupadding {
  padding: 0.5rem 1rem;
}

.collapser {
  position: absolute;
  top: 0px;
  z-index: 1000;
  background-color: #ffffff;
  font-size: 24px;
}

.collapserextended {
  left: $collapser-left-offset;
  transition: $transition;
}

.collapsercollapsed {
  left: 3px;
  transition: $transition;
}

.userpic {
  position: relative;
  left: 1px;
}

.menu {
  height: 90%;
}
.visibility-extended {
  opacity: 100;
  transition: $transition-slow;
}
.visibility-collapsed {
  opacity: 0;
  transition: $transition-fast;
}

.user {
  margin-top: auto;
}
.sidebar {
  margin-top: $topbarheight;
  background-color: #ffffff;
  padding-top: $large-offset;
  height: 96vh;
}

.overlay {
  position: absolute;
  z-index: 1;
}

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

.sidebarextended {
  width: $sidebar-full-width;
  transition: $transition;
}

.username {
  margin-left: $small-offset;
}

.userinfo {
  font-weight: bold;
}

.logout {
  position: relative;
  top: 16px;
  left: -5px;
  margin-left: $small-offset;
  cursor: pointer;
}
</style>