Mercurial > gemma
view client/src/components/Topbar.vue @ 560:66073a476baf
If header "X-Use-Protocol" is set by proxy generate https URLS in password resets.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Mon, 03 Sep 2018 18:41:19 +0200 |
parents | 09d8e5483851 |
children | fb5d9d5ff320 |
line wrap: on
line source
<template> <div class="topbar shadow-sm d-flex flex-row justify-content-between"> <div class="align-self-center"> <i @click="toggleSidebar" class="menubutton fa fa-bars"></i> </div> <div class="searchcontainer align-self-center"> <label class="searchlabel" for="search"> <i class="fa fa-search"></i> </label> <input id="search" type="text" class="search searchbar"> </div> <div class="align-self-center usermanagement"> <img class="userpic" src="../assets/user.png"> <span class="username">{{ userinfo }}</span> <span class="logout" @click="logoff"> <i class="fa fa-power-off"></i> </span> </div> </div> </template> <style lang="scss"> @import "../assets/application.scss"; .topbar { position: absolute; width: 100vw; height: $topbarheight; min-height: 40px; background-color: white; z-index: 100; } .menubutton { cursor: pointer; } .searchcontainer { margin-left: auto; } .usermanagement { margin-left: auto; } .logout { position: relative; top: 3px; font-size: x-large; font-weight: bold; margin-right: $offset; } .userpic { margin-right: 0.5rem; } .username { font-weight: bold; margin-right: 1.5rem; } .searchlabel { color: #aaaaaa; position: relative; top: 2px; font-size: x-large; margin-right: $small-offset; } .searchbar { width: 30vw; border: 1px solid; border-color: #aaaaaa; border-radius: 10px; padding-left: 1rem; padding-right: 1rem; } </style> <script> import { mapGetters } from "vuex"; export default { name: "topbar", methods: { toggleSidebar() { this.$store.commit("application/toggleSidebar"); }, logoff() { this.$store.commit("user/clear_auth"); this.$store.commit("application/resetSidebar"); this.$router.push("/login"); } }, computed: { ...mapGetters("user", ["userinfo"]) } }; </script>