<template>
    <div :class="sidebarStyle">
        <div :class="menuStyle">
            <div class="menupoints" v-if="!this.sidebarCollapsed">
                <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>
        </div>
    </div>
</template>

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

export default {
  name: "sidebar",
  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">
.menupoints {
  text-align: left;
}

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

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

.menu {
  padding-top: $small-offset;
}

.sidebar {
  top: $offset;
  left: $offset;
  background-color: #ffffff;
  padding-top: $large-offset;
  opacity: $slight-transparent;
  border-radius: $border-radius;
}

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

.sidebarcollapsed {
  height: 30px;
  width: 30px;
  transition: $slight-transparent;
}

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