<template>
  <div :class="sidebarStyle">
    <div :class="menuStyle">
      <router-link to="/" class="text-body d-flex flex-row nav-link">
        <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
      <div v-if="isSysAdmin">
        <hr/>
        <div class="nav-link d-flex menupadding text-muted">Administration</div>
        <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
          <i class="fa fa-address-card-o align-self-center navicon"></i>Users
        </router-link>
      </div>
    </div>
    <User></User>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import User from "./User";

export default {
  name: "sidebar",
  components: {
    User: User
  },
  computed: {
    ...mapGetters("user", ["isSysAdmin"]),
    ...mapGetters("application", ["sidebarCollapsed"]),
    menuStyle() {
      return {
        menu: true,
        nav: true,
        "flex-column": true
      };
    },
    sidebarStyle() {
      return {
        "ui-element": true,
        sidebar: true,
        overlay: true,
        sidebarcollapsed: this.sidebarCollapsed,
        sidebarextended: !this.sidebarCollapsed,
        shadow: true
      };
    }
  }
};
</script>

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

.router-link-exact-active {
  background-color: #f2f2f2;
}

.navicon {
  margin-right: $small-offset;
}

.menu {
  padding-top: 5vh;
  height: 90%;
}

.sidebar {
  top: 0;
  background-color: #ffffff;
  padding-top: $large-offset;
  height: 100vh;
  opacity: 0.96;
}

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

.sidebarcollapsed {
  transition: $transition;
  left: -250px;
}

.sidebarextended {
  transition: $transition;
  left: 0;
}
</style>