<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>
                <a v-if="routeName == 'mainview'" href="#" class="text-body d-flex flex-row nav-link" @click="$store.commit('application/toggleBottlenecks');">
                    Bottlenecks
                </a>
                <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>
                    <router-link class="text-body d-flex flex-row nav-link" to="systemconfiguration">
                        <i class="fa  fa-wrench align-self-center navicon"></i>Systemconfiguration
                    </router-link>
                    <router-link class="text-body d-flex flex-row nav-link" to="logs">
                        <i class="fa  fa-book align-self-center navicon"></i>Systeminformation
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/*
 * This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 * 
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 * 
 * Copyright (C) 2018 by via donau 
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 * 
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapGetters } from "vuex";

export default {
  name: "sidebar",
  props: ["routeName"],
  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,
        "d-print-none": 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: $transition-fast;
}

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