Mercurial > gemma
changeset 554:fa4f623e3ca6
feat: Icons for menu navigation
Icons added to sidebar menu.
Mark active entries.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Sep 2018 12:50:43 +0200 |
parents | f41c74b8af9c |
children | f66116b3a249 |
files | client/src/components/Sidebar.vue |
diffstat | 1 files changed, 17 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Mon Sep 03 09:57:29 2018 +0200 +++ b/client/src/components/Sidebar.vue Mon Sep 03 12:50:43 2018 +0200 @@ -1,15 +1,16 @@ <template> <div :class="sidebarStyle"> - <nav :class="menuStyle"> - <router-link to="/" class="d-flex nav-link">Riverbed Morphology</router-link> - <a class="d-flex nav-link" href="#">Link</a> - <a class="d-flex nav-link" href="#">Link</a> + <div :class="menuStyle"> + <router-link to="/" class="text-body d-flex flex-row nav-link"> + <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link> <div v-if="isSysAdmin"> <hr/> - <div class="d-flex menupadding text-muted">Administration</div> - <router-link class="d-flex nav-link" to="users">Users</router-link> + <div class="nav-link d-flex menupadding text-muted">Administration</div> + <router-link class="text-body d-flex flex-row nav-link" to="users"> + <i class="fa fa-address-card-o align-self-center navicon"></i>Users + </router-link> </div> - </nav> + </div> </div> </template> @@ -53,10 +54,18 @@ <style lang="scss"> @import "../assets/application.scss"; -$sidebar-full-width: 210px; +$sidebar-full-width: 230px; $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; +.router-link-exact-active { + background-color: #f2f2f2; +} + +.navicon { + margin-right: $small-offset; +} + .collapser { position: absolute; top: 0px;