Mercurial > gemma

comparison client/src/application/Sidebar.vue @ 585:ef307bd6b5d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: restructured client application To make the application more accessible for developers, the structure was reorganized. Instead of sticking to technical terminology, the application terminology is according to the domain: I.e. "map" contains everything regarding map (including store).
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Sep 2018 11:13:56 +0200
parents
children b17a4482d07d
comparison
equal deleted inserted replaced
584:8b66a10aaf8a 585:ef307bd6b5d8
1 <template>
2 <div :class="sidebarStyle">
3 <div :class="menuStyle">
4 <router-link to="/" class="text-body d-flex flex-row nav-link">
5 <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
6 <div v-if="isSysAdmin">
7 <hr/>
8 <div class="nav-link d-flex menupadding text-muted">Administration</div>
9 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
10 <i class="fa fa-address-card-o align-self-center navicon"></i>Users
11 </router-link>
12 </div>
13 </div>
14 <User></User>
15 </div>
16 </template>
17
18 <script>
19 import { mapGetters } from "vuex";
20 import User from "./User";
21
22 export default {
23 name: "sidebar",
24 components: {
25 User: User
26 },
27 computed: {
28 ...mapGetters("user", ["isSysAdmin"]),
29 ...mapGetters("application", ["sidebarCollapsed"]),
30 menuStyle() {
31 return {
32 menu: true,
33 nav: true,
34 "flex-column": true
35 };
36 },
37 sidebarStyle() {
38 return {
39 "ui-element": true,
40 sidebar: true,
41 overlay: true,
42 sidebarcollapsed: this.sidebarCollapsed,
43 sidebarextended: !this.sidebarCollapsed,
44 shadow: true
45 };
46 }
47 }
48 };
49 </script>
50
51 <style lang="scss">
52 @import "./assets/application.scss";
53
54 .router-link-exact-active {
55 background-color: #f2f2f2;
56 }
57
58 .navicon {
59 margin-right: $small-offset;
60 }
61
62 .menu {
63 padding-top: 5vh;
64 height: 90%;
65 }
66
67 .sidebar {
68 top: 0;
69 background-color: #ffffff;
70 padding-top: $large-offset;
71 height: 100vh;
72 opacity: 0.96;
73 }
74
75 .overlay {
76 position: absolute;
77 z-index: -1;
78 }
79
80 .sidebarcollapsed {
81 transition: $transition;
82 left: -250px;
83 }
84
85 .sidebarextended {
86 transition: $transition;
87 left: 0;
88 }
89 </style>