Mercurial > gemma
changeset 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 | 9908260d1e6a |
files | client/src/App.vue client/src/assets/user.png client/src/components/Sidebar.vue |
diffstat | 3 files changed, 102 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Jul 04 17:21:10 2018 +0200 +++ b/client/src/App.vue Thu Jul 05 16:52:39 2018 +0200 @@ -5,7 +5,11 @@ </template> <style lang="scss"> +html { + height: 100%; +} body { + min-height: 100%; background-color: #efefef !important; }
--- a/client/src/components/Sidebar.vue Wed Jul 04 17:21:10 2018 +0200 +++ b/client/src/components/Sidebar.vue Thu Jul 05 16:52:39 2018 +0200 @@ -1,18 +1,19 @@ <template> - <div class="sidebar"> - <nav class="nav flex-column"> - <a class="nav-link active" href="#">Active</a> + <div :class="sidebarStyle"> + <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> + <nav :class="menuStyle"> + <a class="nav-link active" href="#">Riverbed morphology</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav> - <div class="user d-flex justify-content-center"> + <div :class="userinfoStyle"> <div class="userinfo"> - {{ userinfo }} - </div> - <div class="logout"> - <span @click="logoff"><i class="fa fa-power-off"></i></span> - </div> + <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span> + </div> + <div> + <span class="logout" @click="logoff"><i class="fa fa-power-off"></i></span> + </div> </div> </div> </template> @@ -24,14 +25,49 @@ name: "sidebar", computed: { ...mapGetters("user", ["userinfo"]), + collapseicon() { + return { + fa: true, + "fa-angle-double-left": !this.collapsed, + "fa-angle-double-right": this.collapsed + }; + }, + menuStyle() { + return { + menu: true, + nav: true, + "flex-column": true, + "visibility-extended": !this.collapsed, + "visibility-collapsed": this.collapsed + }; + }, + userinfoStyle() { + return { + user:true, + "d-inline-flex": true, + "visibility-extended": !this.collapsed, + "visibility-collapsed": this.collapsed + }; + }, + collapseStyle() { + return { + collapser: true, + collapserextended: !this.collapsed, + collapsercollapsed: this.collapsed + }; + }, sidebarStyle() { return { + sidebar: true, sidebarcollapsed: this.collapsed, - sidebarextended: this.collapsed + sidebarextended: !this.collapsed }; } }, methods: { + collapse() { + this.collapsed = !this.collapsed; + }, logoff() { this.$store.commit("user/clear_auth"); this.$router.push("/login"); @@ -48,27 +84,69 @@ <style lang="scss"> @import "../assets/application.scss"; -$sidebar-full-width: 150px; +$sidebar-full-width: 210px; +$collapser-left-offset: 170px; +$sidebar-collapsed-width: 0px; +$transition: 0.5s; +$transition-fast: 0.1s; +$transition-slow: 2s; + +.collapser { + position: absolute; + top: 0px; + z-index: 1000; + background-color: #ffffff; + font-size: 24px; +} + +.collapserextended { + left: $collapser-left-offset; + transition: $transition; +} + +.collapsercollapsed { + left: 3px; + transition: $transition; +} -$sidebar-collapsed-width: 80px; +.userpic { + position: relative; + left: 1px; +} +.menu { + height: 90%; +} +.visibility-extended { + opacity: 100; + transition: $transition-slow; +} +.visibility-collapsed { + opacity: 0; + transition: $transition-fast; +} + +.user { + margin-top: auto; +} .sidebar { + background-color: #ffffff; padding-top: $large-offset; + height: 100vh; } .sidebarcollapsed { width: $sidebar-collapsed-width; + transition: $transition; } .sidebarextended { width: $sidebar-full-width; + transition: $transition; } -.user { - position: absolute; - left: 0; - bottom: $large-offset; - width: 90px; +.username { + margin-left: $small-offset; } .userinfo { @@ -76,6 +154,9 @@ } .logout { + position: relative; + top: 8px; margin-left: $small-offset; + cursor: pointer; } </style>