From 1b2a9c54b674c32f5a78c31a9aa8e84bf41a386b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Fri, 5 Apr 2024 07:44:54 +0200
Subject: [PATCH] feat: active state for manage menu items

closes #2190
---
 lnbits/static/js/components.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index e88cce9dd..dfaeecbb1 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -171,6 +171,11 @@ Vue.component('lnbits-extension-list', {
 
 Vue.component('lnbits-manage', {
   props: ['showAdmin', 'showNode', 'showExtensions'],
+  methods: {
+    isActive: function (path) {
+      return window.location.pathname === path
+    }
+  },
   data: function () {
     return {
       extensions: [],
@@ -181,29 +186,29 @@ Vue.component('lnbits-manage', {
     <q-list v-if="user" dense class="lnbits-drawer__q-list">
       <q-item-label header v-text="$t('manage')"></q-item-label>
       <div v-if="user.admin">
-        <q-item v-if='showAdmin' clickable tag="a" href="/admin">
+        <q-item v-if='showAdmin' clickable tag="a" href="/admin" :active="isActive('/admin')">
           <q-item-section side>
-            <q-icon name="admin_panel_settings" color="grey-5" size="md"></q-icon>
+            <q-icon name="admin_panel_settings" :color="isActive('/admin') ? 'primary' : 'grey-5'" size="md"></q-icon>
           </q-item-section>
           <q-item-section>
-            <q-item-label lines="1" class="text-caption" v-text="$t('server')"></q-item-label>
+            <q-item-label lines="1" v-text="$t('server')"></q-item-label>
           </q-item-section>
         </q-item>
-        <q-item v-if='showNode' clickable tag="a" href="/node">
+        <q-item v-if='showNode' clickable tag="a" href="/node" :active="isActive('/node')">
           <q-item-section side>
-            <q-icon name="developer_board" color="grey-5" size="md"></q-icon>
+            <q-icon name="developer_board" :color="isActive('/node') ? 'primary' : 'grey-5'" size="md"></q-icon>
           </q-item-section>
           <q-item-section>
-            <q-item-label lines="1" class="text-caption" v-text="$t('node')"></q-item-label>
+            <q-item-label lines="1" v-text="$t('node')"></q-item-label>
           </q-item-section>
         </q-item>
       </div>
-      <q-item v-if="showExtensions" clickable tag="a" href="/extensions">
+      <q-item v-if="showExtensions" clickable tag="a" href="/extensions" :active="isActive('/extensions')">
         <q-item-section side>
-          <q-icon name="extension" color="grey-5" size="md"></q-icon>
+          <q-icon name="extension" :color="isActive('/extensions') ? 'primary' : 'grey-5'" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption" v-text="$t('extensions')"></q-item-label>
+          <q-item-label lines="1" v-text="$t('extensions')"></q-item-label>
         </q-item-section>
       </q-item>
     </q-list>