highperfocused/lnbits
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits.git synced 2025-09-26 20:06:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: active state for manage menu items

Browse Source 
closes #2190
This commit is contained in:
dni ⚡
2024-04-05 07:44:54 +02:00
committed by Pavol Rusnak
parent 209e2c5bff
commit 1b2a9c54b6
1 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
lnbits/static/js/components.js
View File

@@ -171,6 +171,11 @@ Vue.component('lnbits-extension-list', {
Vue.component('lnbits-manage', { Vue.component('lnbits-manage', {
props: ['showAdmin', 'showNode', 'showExtensions'], props: ['showAdmin', 'showNode', 'showExtensions'],
methods: {
isActive: function (path) {
return window.location.pathname === path
}
},
data: function () { data: function () {
return { return {
extensions: [], extensions: [],
@@ -181,29 +186,29 @@ Vue.component('lnbits-manage', {
<q-list v-if="user" dense class="lnbits-drawer__q-list"> <q-list v-if="user" dense class="lnbits-drawer__q-list">
<q-item-label header v-text="$t('manage')"></q-item-label> <q-item-label header v-text="$t('manage')"></q-item-label>
<div v-if="user.admin"> <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-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-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-section>
</q-item> </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-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-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-section>
</q-item> </q-item>
</div> </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-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-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-section>
</q-item> </q-item>
</q-list> </q-list>