From 5a7df6bfb84c9cb4bb5c831e7d34a13a8128aadb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 27 Nov 2022 10:57:47 +0100
Subject: [PATCH] css nav active style

---
 frontend/src/components/Menu/Sidebar.vue | 32 ++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 526e7cb3a..837ae854f 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -4,7 +4,7 @@
       <!-- @mouseout="$emit('toogleMobilMenu')" -->
       <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">
-          <b-nav-item to="/overview" class="mb-3">
+          <b-nav-item to="/overview" class="mb-3" active-class="activeRoute">
             <b-icon icon="house" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.overview') }}</span>
           </b-nav-item>
@@ -17,11 +17,11 @@
             <span class="ml-2">{{ $t('navigation.adresses') }}</span>
           </b-nav-item> -->
 
-          <b-nav-item to="/send" class="mb-3">
+          <b-nav-item to="/send" class="mb-3" active-class="activeRoute">
             <b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.send') }}</span>
           </b-nav-item>
-          <b-nav-item to="/transactions" class="mb-3">
+          <b-nav-item to="/transactions" class="mb-3" active-class="activeRoute">
             <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.transactions') }}</span>
           </b-nav-item>
@@ -29,14 +29,14 @@
             <b-icon icon="person" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.profile') }}</span>
           </b-nav-item> -->
-          <b-nav-item to="/community" class="mb-3">
+          <b-nav-item to="/community" class="mb-3" active-class="activeRoute">
             <b-icon icon="people" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.members') }}</span>
           </b-nav-item>
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
-          <b-nav-item to="/information" class="mb-3">
+          <b-nav-item to="/information" class="mb-3" active-class="activeRoute">
             <b-icon icon="info" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.info') }}</span>
           </b-nav-item>
@@ -54,15 +54,20 @@
               <span v-else>{{ $t('navigation.sun') }}</span>
             </label>
           </b-nav-item> -->
-          <b-nav-item to="/settings" class="mb-3">
+          <b-nav-item to="/settings" class="mb-3" active-class="activeRoute">
             <b-icon icon="gear" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.settings') }}</span>
           </b-nav-item>
-          <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
+          <b-nav-item
+            class="mb-3"
+            v-if="$store.state.isAdmin"
+            @click="$emit('admin')"
+            active-class="activeRoute"
+          >
             <b-icon icon="shield-check" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.admin_area') }}</span>
           </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')">
+          <b-nav-item class="mb-3" @click="$emit('logout')" active-class="activeRoute">
             <b-icon icon="power" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('navigation.logout') }}</span>
           </b-nav-item>
@@ -88,10 +93,17 @@ export default {
 }
 </script>
 <style>
-.component-navbar .active,
-#component-sidebar .active {
+.activeRoute {
   font-weight: bold;
+  color: rgb(219, 129, 19);
+  border-left: 1rem solid;
 }
+
+/* .component-navbar .active, */
+/* #component-sidebar .active {
+  font-weight: bold;
+  color: red;
+} */
 #component-sidebar {
   min-width: 53px;
   max-width: 200px;