From 85be61a3166270a4705f1bc5cc3f23108a88e53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 22 Jan 2023 20:53:04 +0100
Subject: [PATCH] fix: settings navigation (#1389)

---
 components/settings/SettingsItem.vue | 3 ++-
 pages/settings.vue                   | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/settings/SettingsItem.vue b/components/settings/SettingsItem.vue
index 59b62882..a076122f 100644
--- a/components/settings/SettingsItem.vue
+++ b/components/settings/SettingsItem.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   disabled?: boolean
   external?: true
   large?: true
+  match?: boolean
 }>()
 
 const router = useRouter()
@@ -39,7 +40,7 @@ useCommand({
     :to="to"
     :external="external"
     exact-active-class="text-primary"
-    :class="disabled ? 'op25 pointer-events-none ' : ''"
+    :class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
     block w-full group focus:outline-none
     :tabindex="disabled ? -1 : null"
     @click="to ? $scrollToTop() : undefined"
diff --git a/pages/settings.vue b/pages/settings.vue
index db03ce53..f2c8e614 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -32,12 +32,14 @@ const isRootPath = computedEager(() => route.name === 'settings')
               icon="i-ri:user-line"
               :text="$t('settings.profile.label')"
               to="/settings/profile"
+              :match="$route.path.startsWith('/settings/profile/')"
             />
             <SettingsItem
               command
               icon="i-ri-compasses-2-line"
               :text="$t('settings.interface.label')"
               to="/settings/interface"
+              :match="$route.path.startsWith('/settings/interface/')"
             />
             <SettingsItem
               v-if="isHydrated && currentUser"
@@ -45,30 +47,35 @@ const isRootPath = computedEager(() => route.name === 'settings')
               icon="i-ri:notification-badge-line"
               :text="$t('settings.notifications_settings')"
               to="/settings/notifications"
+              :match="$route.path.startsWith('/settings/notifications/')"
             />
             <SettingsItem
               command
               icon="i-ri-globe-line"
               :text="$t('settings.language.label')"
               to="/settings/language"
+              :match="$route.path.startsWith('/settings/language/')"
             />
             <SettingsItem
               command
               icon="i-ri-equalizer-line"
               :text="$t('settings.preferences.label')"
               to="/settings/preferences"
+              :match="$route.path.startsWith('/settings/preferences/')"
             />
             <SettingsItem
               command
               icon="i-ri-group-line"
               :text="$t('settings.users.label')"
               to="/settings/users"
+              :match="$route.path.startsWith('/settings/users/')"
             />
             <SettingsItem
               command
               icon="i-ri:information-line"
               :text="$t('settings.about.label')"
               to="/settings/about"
+              :match="$route.path.startsWith('/settings/about/')"
             />
           </div>
         </MainContent>