Mercurial > gemma
comparison client/src/components/Sidebar.vue @ 161:b7ac2e4f9c5c
feat: collapsible sidebar
According to UI prototypes collabsible sidebar implemented.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 05 Jul 2018 16:52:39 +0200 |
parents | 061209505028 |
children | 9f1b84b712a8 |
comparison
equal
deleted
inserted
replaced
160:061209505028 | 161:b7ac2e4f9c5c |
---|---|
1 <template> | 1 <template> |
2 <div class="sidebar"> | 2 <div :class="sidebarStyle"> |
3 <nav class="nav flex-column"> | 3 <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> |
4 <a class="nav-link active" href="#">Active</a> | 4 <nav :class="menuStyle"> |
5 <a class="nav-link active" href="#">Riverbed morphology</a> | |
5 <a class="nav-link" href="#">Link</a> | 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 disabled" href="#">Disabled</a> | 8 <a class="nav-link disabled" href="#">Disabled</a> |
8 </nav> | 9 </nav> |
9 <div class="user d-flex justify-content-center"> | 10 <div :class="userinfoStyle"> |
10 <div class="userinfo"> | 11 <div class="userinfo"> |
11 {{ userinfo }} | 12 <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span> |
12 </div> | 13 </div> |
13 <div class="logout"> | 14 <div> |
14 <span @click="logoff"><i class="fa fa-power-off"></i></span> | 15 <span class="logout" @click="logoff"><i class="fa fa-power-off"></i></span> |
15 </div> | 16 </div> |
16 </div> | 17 </div> |
17 </div> | 18 </div> |
18 </template> | 19 </template> |
19 | 20 |
20 <script> | 21 <script> |
22 | 23 |
23 export default { | 24 export default { |
24 name: "sidebar", | 25 name: "sidebar", |
25 computed: { | 26 computed: { |
26 ...mapGetters("user", ["userinfo"]), | 27 ...mapGetters("user", ["userinfo"]), |
28 collapseicon() { | |
29 return { | |
30 fa: true, | |
31 "fa-angle-double-left": !this.collapsed, | |
32 "fa-angle-double-right": this.collapsed | |
33 }; | |
34 }, | |
35 menuStyle() { | |
36 return { | |
37 menu: true, | |
38 nav: true, | |
39 "flex-column": true, | |
40 "visibility-extended": !this.collapsed, | |
41 "visibility-collapsed": this.collapsed | |
42 }; | |
43 }, | |
44 userinfoStyle() { | |
45 return { | |
46 user:true, | |
47 "d-inline-flex": true, | |
48 "visibility-extended": !this.collapsed, | |
49 "visibility-collapsed": this.collapsed | |
50 }; | |
51 }, | |
52 collapseStyle() { | |
53 return { | |
54 collapser: true, | |
55 collapserextended: !this.collapsed, | |
56 collapsercollapsed: this.collapsed | |
57 }; | |
58 }, | |
27 sidebarStyle() { | 59 sidebarStyle() { |
28 return { | 60 return { |
61 sidebar: true, | |
29 sidebarcollapsed: this.collapsed, | 62 sidebarcollapsed: this.collapsed, |
30 sidebarextended: this.collapsed | 63 sidebarextended: !this.collapsed |
31 }; | 64 }; |
32 } | 65 } |
33 }, | 66 }, |
34 methods: { | 67 methods: { |
68 collapse() { | |
69 this.collapsed = !this.collapsed; | |
70 }, | |
35 logoff() { | 71 logoff() { |
36 this.$store.commit("user/clear_auth"); | 72 this.$store.commit("user/clear_auth"); |
37 this.$router.push("/login"); | 73 this.$router.push("/login"); |
38 } | 74 } |
39 }, | 75 }, |
46 </script> | 82 </script> |
47 | 83 |
48 <style lang="scss"> | 84 <style lang="scss"> |
49 @import "../assets/application.scss"; | 85 @import "../assets/application.scss"; |
50 | 86 |
51 $sidebar-full-width: 150px; | 87 $sidebar-full-width: 210px; |
88 $collapser-left-offset: 170px; | |
89 $sidebar-collapsed-width: 0px; | |
90 $transition: 0.5s; | |
91 $transition-fast: 0.1s; | |
92 $transition-slow: 2s; | |
52 | 93 |
53 $sidebar-collapsed-width: 80px; | 94 .collapser { |
95 position: absolute; | |
96 top: 0px; | |
97 z-index: 1000; | |
98 background-color: #ffffff; | |
99 font-size: 24px; | |
100 } | |
54 | 101 |
102 .collapserextended { | |
103 left: $collapser-left-offset; | |
104 transition: $transition; | |
105 } | |
106 | |
107 .collapsercollapsed { | |
108 left: 3px; | |
109 transition: $transition; | |
110 } | |
111 | |
112 .userpic { | |
113 position: relative; | |
114 left: 1px; | |
115 } | |
116 | |
117 .menu { | |
118 height: 90%; | |
119 } | |
120 .visibility-extended { | |
121 opacity: 100; | |
122 transition: $transition-slow; | |
123 } | |
124 .visibility-collapsed { | |
125 opacity: 0; | |
126 transition: $transition-fast; | |
127 } | |
128 | |
129 .user { | |
130 margin-top: auto; | |
131 } | |
55 .sidebar { | 132 .sidebar { |
133 background-color: #ffffff; | |
56 padding-top: $large-offset; | 134 padding-top: $large-offset; |
135 height: 100vh; | |
57 } | 136 } |
58 | 137 |
59 .sidebarcollapsed { | 138 .sidebarcollapsed { |
60 width: $sidebar-collapsed-width; | 139 width: $sidebar-collapsed-width; |
140 transition: $transition; | |
61 } | 141 } |
62 | 142 |
63 .sidebarextended { | 143 .sidebarextended { |
64 width: $sidebar-full-width; | 144 width: $sidebar-full-width; |
145 transition: $transition; | |
65 } | 146 } |
66 | 147 |
67 .user { | 148 .username { |
68 position: absolute; | 149 margin-left: $small-offset; |
69 left: 0; | |
70 bottom: $large-offset; | |
71 width: 90px; | |
72 } | 150 } |
73 | 151 |
74 .userinfo { | 152 .userinfo { |
75 font-weight: bold; | 153 font-weight: bold; |
76 } | 154 } |
77 | 155 |
78 .logout { | 156 .logout { |
157 position: relative; | |
158 top: 8px; | |
79 margin-left: $small-offset; | 159 margin-left: $small-offset; |
160 cursor: pointer; | |
80 } | 161 } |
81 </style> | 162 </style> |