<template>
  <div :class="sidebarStyle">
    <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div>
    <nav :class="menuStyle">
      <a class="nav-link active" href="#">Riverbed morphology</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="userinfoStyle">
      <div class="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"]),
    collapseicon() {
      return {
        fa: true,
        "fa-angle-double-left": !this.collapsed,
        "fa-angle-double-right": this.collapsed
      };
    },
    menuStyle() {
      return {
        menu: true,
        nav: true,
        "flex-column": true,
        "visibility-extended": !this.collapsed,
        "visibility-collapsed": this.collapsed
      };
    },
    userinfoStyle() {
      return {
        user: true,
        "d-inline-flex": true,
        "visibility-extended": !this.collapsed,
        "visibility-collapsed": this.collapsed
      };
    },
    collapseStyle() {
      return {
        collapser: true,
        collapserextended: !this.collapsed,
        collapsercollapsed: this.collapsed
      };
    },
    sidebarStyle() {
      return {
        sidebar: true,
        sidebarcollapsed: this.collapsed,
        sidebarextended: !this.collapsed
      };
    }
  },
  methods: {
    collapse() {
      this.collapsed = !this.collapsed;
    },
    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: 210px;
$collapser-left-offset: 170px;
$sidebar-collapsed-width: 0px;
$transition: 0.5s;
$transition-fast: 0.1s;
$transition-slow: 2s;

.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 {
  position: absolute;
  z-index: 1;
  background-color: #ffffff;
  padding-top: $large-offset;
  height: 100vh;
}

.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: 8px;
  margin-left: $small-offset;
  cursor: pointer;
}
</style>