Mercurial > gemma
view client/src/components/Sidebar.vue @ 551:89bc8111563a
refac: Layout adjustments
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 14:12:00 +0200 |
parents | 06907c875077 |
children | fa4f623e3ca6 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <nav :class="menuStyle"> <router-link to="/" class="d-flex nav-link">Riverbed Morphology</router-link> <a class="d-flex nav-link" href="#">Link</a> <a class="d-flex nav-link" href="#">Link</a> <div v-if="isSysAdmin"> <hr/> <div class="d-flex menupadding text-muted">Administration</div> <router-link class="d-flex nav-link" to="users">Users</router-link> </div> </nav> </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, "visibility-extended": !this.sidebarCollapsed, "visibility-collapsed": this.sidebarCollapsed }; }, collapseStyle() { return { collapser: true, collapserextended: !this.sidebarCollapsed, collapsercollapsed: this.sidebarCollapsed }; }, sidebarStyle() { return { sidebar: true, overlay: true, sidebarcollapsed: this.sidebarCollapsed, sidebarextended: !this.sidebarCollapsed, shadow: true }; } } }; </script> <style lang="scss"> @import "../assets/application.scss"; $sidebar-full-width: 210px; $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; .collapser { position: absolute; top: 0px; z-index: 1000; background-color: #ffffff; font-size: 24px; } .collapserextended { left: $collapser-left-offset; transition: $transition; } .collapsercollapsed { left: 3px; transition: $transition; } .menu { height: 90%; } .visibility-extended { opacity: 100; transition: $transition-slow; } .visibility-collapsed { opacity: 0; transition: $transition-fast; } .sidebar { margin-top: $topbarheight; background-color: #ffffff; padding-top: $large-offset; height: 100vh-$topbarheight; } .overlay { position: absolute; z-index: 1; } .sidebarcollapsed { width: $sidebar-collapsed-width; transition: $transition; } .sidebarextended { width: $sidebar-full-width; transition: $transition; } </style>