Mercurial > gemma
comparison client/src/components/Sidebar.vue @ 278:9c1dfadb53aa usermanagement
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; |