<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>
    </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">
@import "./assets/application.scss";

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

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

.menu {
  padding-top: 5vh;
}

.sidebar {
  top: 1rem;
  left: 1rem;
  background-color: #ffffff;
  padding-top: $large-offset;
  opacity: 0.96;
  border-radius: 0.5rem;
}

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

.sidebarcollapsed {
  display: none;
}

.sidebarextended {
  display: block;
}
</style>