<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>
</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,
        "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
      };
    }
  }
};
</script>

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

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

.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;
}

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

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

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

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

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