fix: settings navigation (#1389)

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"

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>