Mercurial > gemma
view client/src/components/Sidebar.vue @ 556:09d8e5483851
fix: Layout for users and user details edited
User's role is now rendered as icon
sizing flaws removed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Sep 2018 14:21:31 +0200 |
parents | fa4f623e3ca6 |
children | fb5d9d5ff320 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div :class="menuStyle"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link> <div v-if="isSysAdmin"> <hr/> <div class="nav-link d-flex menupadding text-muted">Administration</div> <router-link class="text-body d-flex flex-row nav-link" to="users"> <i class="fa fa-address-card-o align-self-center navicon"></i>Users </router-link> </div> </div> </div> </template> <script> import { mapGetters } from "vuex"; export default { name: "sidebar", computed: { ...mapGetters("user", ["isSysAdmin"]), ...mapGetters("application", ["sidebarCollapsed"]), menuStyle() { return { menu: true, nav: true, "flex-column": true }; }, sidebarStyle() { return { sidebar: true, overlay: true, sidebarcollapsed: this.sidebarCollapsed, sidebarextended: !this.sidebarCollapsed, shadow: true }; } } }; </script> <style lang="scss"> @import "../assets/application.scss"; .router-link-exact-active { background-color: #f2f2f2; } .navicon { margin-right: $small-offset; } .menu { height: 90%; } .sidebar { margin-top: $topbarheight; background-color: #ffffff; padding-top: $large-offset; height: 100vh-$topbarheight; } .overlay { position: absolute; z-index: 1; } .sidebarcollapsed { transition: $transition; left: -250px; } .sidebarextended { transition: $transition; left: 0; } </style>