Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 161:b7ac2e4f9c5c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>