Mercurial > gemma
view client/src/components/Sidebar.vue @ 1282:a7dd8a3356fc
fixed contextBox animations
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 10:20:21 +0100 |
parents | bc55ffaeb639 |
children | e1480ad4b6b0 |
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="menuStyle"> <div class="menupoints" v-if="this.showSidebar"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Map </router-link> <div class="d-flex flex-row nav-link"> <i class="fa fa-ship align-self-center navicon"></i> <a class="text-body d-flex flex-row" href="#" @click="toggleContextBox('bottlenecks')" >Bottlenecks</a> </div> <div v-if="isSysAdmin"> <hr> <div class="nav-link d-flex menupadding text-muted">Administration</div> </div> <div v-if="isWaterwayAdmin"> <div class="d-flex flex-row nav-link"> <i class="fa fa-upload align-self-center navicon"></i> <a href="#" class="text-body" @click="toggleContextBox('imports')" >Import soundingresults</a> </div> <div class="d-flex flex-row nav-link"> <i class="fa fa-list-ol align-self-center navicon"></i> <a href="#" class="text-body" @click="toggleContextBox('staging')" >Staging area</a> </div> <div class="nav-link d-flex menupadding text-muted">Systemadministration</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> </div> <div v-if="isSysAdmin"> <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>Logs </router-link> <router-link class="text-body d-flex flex-row nav-link" to="importqueue"> <i class="fa fa-exchange align-self-center navicon"></i>Importqueue </router-link> </div> <hr> <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link"> <i class="fa fa-power-off align-self-center navicon"></i> Logout {{ user }} </a> </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, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), ...mapState("application", [ "showSidebar", "showSearchbarLastState", "contextBoxContent" ]), menuStyle() { return { menu: true, nav: true, "flex-column": true }; }, 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/showUsermenu", false); this.$store.commit("application/showSplitscreen", false); 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); } } }; </script> <style lang="sass" scoped> a:hover text-decoration: none .menupoints text-align: left .menubutton height: $icon-height width: $icon-width top: 0 left: 0 color: #666 .router-link-exact-active background-color: #f2f2f2 .navicon margin-right: $small-offset color: #666 .menu padding-top: $small-offset .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent .sidebarcollapsed height: 30px width: 30px transition: $transition-fast .sidebarextended height: 35rem width: $sidebar-width min-width: $sidebar-width </style>