Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 278:9c1dfadb53aa usermanagement

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: usermanagement - route established and secured Added new route for prototypical implementation of usermanagement.
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 30 Jul 2018 16:02:19 +0200
parents 807efc83e507
children 96860b2bbc0d
comparison
equal deleted inserted replaced
277:807efc83e507 278:9c1dfadb53aa
1 <template> 1 <template>
2 <div :class="sidebarStyle"> 2 <div :class="sidebarStyle">
3 <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> 3 <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div>
4 <nav :class="menuStyle"> 4 <nav :class="menuStyle">
5 <a class="nav-link active" href="#">Riverbed morphology</a> 5 <router-link to="/">Riverbed Morphology</router-link>
6 <a class="nav-link" href="#">Link</a> 6 <a class="nav-link" href="#">Link</a>
7 <a class="nav-link" href="#">Link</a> 7 <a class="nav-link" href="#">Link</a>
8 <a class="nav-link disabled" href="#">Disabled</a> 8 <a class="nav-link disabled" href="#">Disabled</a>
9 <div v-if="is_waterway_admin">
10 <router-link to="users">Users</router-link>
11 </div>
9 </nav> 12 </nav>
10 <div :class="userinfoStyle"> 13 <div :class="userinfoStyle">
11 <div class="userinfo"> 14 <div class="userinfo">
12 <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span> 15 <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span>
13 </div> 16 </div>
21 <script> 24 <script>
22 import { mapGetters } from "vuex"; 25 import { mapGetters } from "vuex";
23 26
24 export default { 27 export default {
25 name: "sidebar", 28 name: "sidebar",
29 props: ["isOverlay"],
26 computed: { 30 computed: {
27 ...mapGetters("user", ["userinfo"]), 31 ...mapGetters("user", ["userinfo", "is_waterway_admin"]),
28 collapseicon() { 32 collapseicon() {
29 return { 33 return {
30 fa: true, 34 fa: true,
31 "fa-angle-double-left": !this.collapsed, 35 "fa-angle-double-left": !this.collapsed,
32 "fa-angle-double-right": this.collapsed 36 "fa-angle-double-right": this.collapsed
57 }; 61 };
58 }, 62 },
59 sidebarStyle() { 63 sidebarStyle() {
60 return { 64 return {
61 sidebar: true, 65 sidebar: true,
66 overlay: this.isOverlay,
62 sidebarcollapsed: this.collapsed, 67 sidebarcollapsed: this.collapsed,
63 sidebarextended: !this.collapsed 68 sidebarextended: !this.collapsed
64 }; 69 };
65 } 70 }
66 }, 71 },
128 133
129 .user { 134 .user {
130 margin-top: auto; 135 margin-top: auto;
131 } 136 }
132 .sidebar { 137 .sidebar {
133 position: absolute;
134 z-index: 1;
135 background-color: #ffffff; 138 background-color: #ffffff;
136 padding-top: $large-offset; 139 padding-top: $large-offset;
137 height: 100vh; 140 height: 100vh;
141 }
142
143 .overlay {
144 position: absolute;
145 z-index: 1;
138 } 146 }
139 147
140 .sidebarcollapsed { 148 .sidebarcollapsed {
141 width: $sidebar-collapsed-width; 149 width: $sidebar-collapsed-width;
142 transition: $transition; 150 transition: $transition;