Mercurial > gemma
view client/src/components/Sidebar.vue @ 1294:b9fd587d8ea0
removed console.log
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 14:05:30 +0100 |
parents | e1480ad4b6b0 |
children | 99c039e86624 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" > <i class="ui-element d-print-none fa fa-bars"></i> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> <i class="fa fa-map-o"></i> Map </router-link> <a href="#" @click="toggleContextBox('bottlenecks')" :class="['secondary', { active: isActive('bottlenecks') }]"> <i class="fa fa-ship"></i> Bottlenecks </a> <div v-if="isWaterwayAdmin"> <a href="#" @click="toggleContextBox('imports')" :class="['secondary', { active: isActive('imports') }]"> <i class="fa fa-upload align-self-center navicon"></i> Import soundingresults </a> <a href="#" @click="toggleContextBox('staging')" :class="['secondary', { active: isActive('staging') }]"> <i class="fa fa-list-ol align-self-center navicon"></i> Staging area </a> <small class="text-muted pl-3">Systemadministration</small> <hr class="m-0"> <router-link to="usermanagement"> <i class="fa fa-address-card-o"></i> Users </router-link> </div> <div v-if="isSysAdmin"> <router-link to="systemconfiguration"> <i class="fa fa-wrench"></i> Systemconfiguration </router-link> <router-link to="logs"> <i class="fa fa-book"></i> Logs </router-link> <router-link to="importqueue"> <i class="fa fa-exchange"></i> Importqueue </router-link> </div> <hr class="m-0"> <a href="#" @click="logoff"> <i class="fa fa-power-off"></i> Logout {{ user }} </a> </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, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), ...mapState("application", [ "showSidebar", "showSearchbarLastState", "contextBoxContent", "showContextBox" ]), sidebarStyle() { return [ "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar } ]; } }, methods: { logoff() { this.$store.commit("user/clearAuth"); this.$store.commit("application/showSidebar", false); this.$store.commit("application/showSplitscreen", false); this.$store.dispatch("fairwayprofile/clearSelection"); this.$router.push("/login"); }, toggleContextBox(context) { this.$router.push("/"); this.$store.commit("application/showContextBox", true); this.$store.commit("application/contextBoxContent", context); this.$store.commit("application/showSearchbar", true); }, isActive(item) { return ( this.showContextBox && this.contextBoxContent === item && this.routeName == "mainview" ); } } }; </script> <style lang="sass" scoped> .menubutton height: $icon-height width: $icon-width top: 0 left: 0 color: #666 .menu a display: block text-align: left padding: 0.5rem 1rem color: #333 text-decoration: none i color: #666 margin-right: $small-offset &:hover background-color: #f8f8f8 &.router-link-exact-active background-color: $color-info color: #fff i color: #fff &.secondary font-size: 0.9rem &.active background: lighten($color-info, 55) color: darken($color-info, 15) i color: darken($color-info, 15) .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent transition: $transition-fast overflow: hidden .sidebarcollapsed max-height: 30px max-width: 30px .sidebarextended max-height: 35rem max-width: $sidebar-width </style>