Mercurial > gemma
view client/src/components/Sidebar.vue @ 162:9908260d1e6a
Refactor: Login expiry refactored to lib
test: First unit test for session
Cleaned up Code regarding expired sessions.
First unit test established for session mostly for educational
purposes.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 05 Jul 2018 18:01:39 +0200 |
parents | b7ac2e4f9c5c |
children | 9f1b84b712a8 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> <nav :class="menuStyle"> <a class="nav-link active" href="#">Riverbed morphology</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav> <div :class="userinfoStyle"> <div class="userinfo"> <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span> </div> <div> <span class="logout" @click="logoff"><i class="fa fa-power-off"></i></span> </div> </div> </div> </template> <script> import { mapGetters } from "vuex"; export default { name: "sidebar", computed: { ...mapGetters("user", ["userinfo"]), collapseicon() { return { fa: true, "fa-angle-double-left": !this.collapsed, "fa-angle-double-right": this.collapsed }; }, menuStyle() { return { menu: true, nav: true, "flex-column": true, "visibility-extended": !this.collapsed, "visibility-collapsed": this.collapsed }; }, userinfoStyle() { return { user:true, "d-inline-flex": true, "visibility-extended": !this.collapsed, "visibility-collapsed": this.collapsed }; }, collapseStyle() { return { collapser: true, collapserextended: !this.collapsed, collapsercollapsed: this.collapsed }; }, sidebarStyle() { return { sidebar: true, sidebarcollapsed: this.collapsed, sidebarextended: !this.collapsed }; } }, methods: { collapse() { this.collapsed = !this.collapsed; }, logoff() { this.$store.commit("user/clear_auth"); this.$router.push("/login"); } }, data() { return { collapsed: false }; } }; </script> <style lang="scss"> @import "../assets/application.scss"; $sidebar-full-width: 210px; $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; $transition: 0.5s; $transition-fast: 0.1s; $transition-slow: 2s; .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; } .userpic { position: relative; left: 1px; } .menu { height: 90%; } .visibility-extended { opacity: 100; transition: $transition-slow; } .visibility-collapsed { opacity: 0; transition: $transition-fast; } .user { margin-top: auto; } .sidebar { background-color: #ffffff; padding-top: $large-offset; height: 100vh; } .sidebarcollapsed { width: $sidebar-collapsed-width; transition: $transition; } .sidebarextended { width: $sidebar-full-width; transition: $transition; } .username { margin-left: $small-offset; } .userinfo { font-weight: bold; } .logout { position: relative; top: 8px; margin-left: $small-offset; cursor: pointer; } </style>