Mercurial > gemma
view client/src/components/Sidebar.vue @ 485:7a8644e9e50e
client: add (unwired) password reset form
* Add password reset form to the Login view. Pressing the forgotton
link will blend it in and currently the send button will hide it again.
This is a good first place because an additional view and route would be
more work with the same functionality. It doe not yet trigger action
with the backend.
* Put password forgotten part and bottom logo in divs beside the first form
which matches the semantics better.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 24 Aug 2018 12:14:56 +0200 |
parents | e7d5383bc358 |
children | ab5d2cf65f3c |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> <nav :class="menuStyle"> <router-link to="/">Riverbed Morphology</router-link> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> <div v-if="isSysAdmin"> <router-link to="users">Users</router-link> </div> </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", props: ["isOverlay"], computed: { ...mapGetters("user", ["userinfo", "isSysAdmin"]), collapseicon() { return { fa: true, "fa-angle-double-left": !this.isCollapsed, "fa-angle-double-right": this.isCollapsed }; }, menuStyle() { return { menu: true, nav: true, "flex-column": true, "visibility-extended": !this.isCollapsed, "visibility-collapsed": this.isCollapsed }; }, userinfoStyle() { return { user: true, "d-inline-flex": true, "visibility-extended": !this.isCollapsed, "visibility-collapsed": this.isCollapsed }; }, collapseStyle() { return { collapser: true, collapserextended: !this.isCollapsed, collapsercollapsed: this.isCollapsed }; }, sidebarStyle() { return { sidebar: true, overlay: this.isOverlay, sidebarcollapsed: this.isCollapsed, sidebarextended: !this.isCollapsed }; } }, methods: { collapse() { this.isCollapsed = !this.isCollapsed; }, logoff() { this.$store.commit("user/clear_auth"); this.$router.push("/login"); } }, data() { return { isCollapsed: false }; } }; </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; } .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; } .overlay { position: absolute; z-index: 1; } .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>