Mercurial > gemma

changeset 554:fa4f623e3ca6

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