feat: active state for manage menu items

closes #2190
This commit is contained in:
dni ⚡ 2024-04-05 07:44:54 +02:00 committed by Pavol Rusnak
parent 209e2c5bff
commit 1b2a9c54b6

View File

@ -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>