Mercurial > gemma
view client/src/components/Sidebar.vue @ 1542:31c6c7bd6190
layout issues
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 10 Dec 2018 12:48:37 +0100 |
parents | 6eec1c324a64 |
children | a0833dc8b1c1 |
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 class="fa-fw" icon="bars"></font-awesome-icon> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="map-marked-alt" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Map</span> </router-link> <a :class="['secondary', { active: isActive('bottlenecks') }]" @click="toggleContextBox('bottlenecks')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="ship" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Bottlenecks</span> </a> <div v-if="isWaterwayAdmin"> <a :class="['secondary', { active: isActive('imports') }]" @click="toggleContextBox('imports')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="upload" ></font-awesome-icon> <span class="fix-trans-space" v-translate >Import soundingresults</span > </a> <a :class="['secondary', { active: isActive('staging') }]" @click="toggleContextBox('staging')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="clipboard-check" ></font-awesome-icon> <span class="fix-trans-space" v-translate>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 class="fa-fw mr-2" fixed-width icon="users-cog" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Users</span> </router-link> </div> <div v-if="isSysAdmin"> <router-link to="systemconfiguration"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="wrench" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Configuration</span> </router-link> <router-link to="logs"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="book" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Logs</span> </router-link> <router-link to="importqueue"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="tasks" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Importqueue</span> </router-link> <router-link to="importschedule" v-if="this.$options.IMPORTSCHEDULE"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="clock" ></font-awesome-icon> <translate class="fix-trans-space">Importschedule</translate> </router-link> </div> <hr class="m-0" /> <a @click="logoff" href="#"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="power-off" ></font-awesome-icon> <span class="fix-trans-space" v-translate>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"; import app from "../main"; 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() { app.$snotify.clear(); 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>