Mercurial > gemma
view client/src/components/Sidebar.vue @ 1443:6b100f639178
removed blue borders from fairwayprofile and infobar
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 30 Nov 2018 13:20:26 +0100 |
parents | f4b3fb43b311 |
children | bb47531bdd22 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" > <font-awesome-icon icon="bars"></font-awesome-icon> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> <font-awesome-icon icon="map-marked-alt" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Map</span> </router-link> <a href="#" @click="toggleContextBox('bottlenecks')" :class="['secondary', { active: isActive('bottlenecks') }]" > <font-awesome-icon icon="ship" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Bottlenecks</span> </a> <div v-if="isWaterwayAdmin"> <a href="#" @click="toggleContextBox('imports')" :class="['secondary', { active: isActive('imports') }]" > <font-awesome-icon icon="upload" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Import soundingresults</span> </a> <a href="#" @click="toggleContextBox('staging')" :class="['secondary', { active: isActive('staging') }]" > <font-awesome-icon icon="clipboard-check" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Staging area</span> </a> <small class="text-muted pl-3"> <translate>Systemadministration</translate> </small> <hr class="m-0"> <router-link to="usermanagement"> <font-awesome-icon icon="users-cog" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Users</span> </router-link> </div> <div v-if="isSysAdmin"> <router-link to="systemconfiguration"> <font-awesome-icon icon="wrench" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Configuration</span> </router-link> <router-link to="logs"> <font-awesome-icon icon="book" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Logs</span> </router-link> <router-link to="importqueue"> <font-awesome-icon icon="tasks" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Importqueue</span> </router-link> <router-link v-if="this.$options.IMPORTSCHEDULE" to="importschedule"> <font-awesome-icon icon="clock" fixed-width></font-awesome-icon> <translate>Importschedule</translate> </router-link> </div> <hr class="m-0"> <a href="#" @click="logoff"> <font-awesome-icon icon="power-off" fixed-width></font-awesome-icon> <span v-translate class="fix-trans-space">Logout</span> {{ 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 } ]; } }, IMPORTSCHEDULE: process.env.VUE_APP_FEATURE_IMPORTSCHEDULE, methods: { logoff() { this.$store.commit("reset"); this.$store.commit("user/clearAuth"); 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 svg path fill: #666 &:hover background-color: #f8f8f8 &.router-link-exact-active background-color: $color-info color: #fff svg path fill: #fff &.secondary &.active background: lighten($color-info, 55) color: darken($color-info, 15) svg path fill: darken($color-info, 15) .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent transition: $transition-fast overflow: hidden .sidebarcollapsed max-height: $icon-height max-width: $icon-width .sidebarextended max-height: 35rem max-width: $sidebar-width </style>