Mercurial > gemma
view client/src/components/Sidebar.vue @ 1455:33dda08d67be
unified layout for adminsection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Dec 2018 12:02:17 +0100 |
parents | bb47531bdd22 |
children | a6dd2a8183a4 |
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="scss" scoped> .menubutton { height: 2rem; width: 2rem; top: 0; left: 0; color: #666; } .menu a { display: block; text-align: left; padding: 0.5rem 1rem; color: #333; text-decoration: none; } .menu a svg path { fill: #666; } .menu a:hover { background-color: #f8f8f8; } .menu a.router-link-exact-active { background-color: #17a2b8; color: #fff; } .menu a.router-link-exact-active svg path { fill: #fff; } .menu a.secondary.active { background: #ebfafd; color: #0f6674; } .menu a.secondary.active svg path { fill: #0f6674; } .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; min-width: $sidebar-width; } </style>