fix: improved sidebar for settings

frontend/src/components/Settings/SettingFields.vue

@@ -96,7 +96,7 @@
 						size="sm"
 						:label="__(field.label)"
 						:description="__(field.description)"
-						v-model="data[field.name]"
+						v-model="field.value"
 					/>
 
 					<FormControl
@@ -147,8 +147,6 @@ const columns = computed(() => {
 		} else {
 			if (field.type == 'checkbox') {
 				field.value = props.data[field.name] ? true : false
-			} else {
-				field.value = props.data[field.name]
 			}
 			currentColumn.push(field)
 		}

frontend/src/components/Settings/Settings.vue

@@ -14,18 +14,13 @@
 							<span>{{ __(tab.label) }}</span>
 						</div>
 						<nav class="space-y-1">
-							<SidebarLink
-								v-for="item in tab.items"
-								:link="item"
-								:key="item.label"
-								class="w-full"
-								:class="
-									activeTab?.label == item.label
-										? 'bg-surface-selected shadow-sm'
-										: 'hover:bg-surface-gray-2'
-								"
-								@click="activeTab = item"
-							/>
+							<div v-for="item in tab.items" @click="activeTab = item">
+								<SidebarLink
+									:link="item"
+									:key="item.label"
+									:activeTab="activeTab?.label"
+								/>
+							</div>
 						</nav>
 					</div>
 				</div>

frontend/src/components/SidebarLink.vue

@@ -65,7 +65,7 @@
 import { Tooltip } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import contactUsEmail from '@/components/ContactUsEmail.vue'
+import ContactUsEmail from '@/components/ContactUsEmail.vue'
 import * as icons from 'lucide-vue-next'
 
 const router = useRouter()
@@ -85,13 +85,17 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	activeTab: {
+		type: String,
+		default: '',
+	},
 })
 
 function handleClick() {
-	if (props.link.to.includes('@')) {
-		showContactForm.value = true
-	} else if (router.hasRoute(props.link.to)) {
+	if (router.hasRoute(props.link.to)) {
 		router.push({ name: props.link.to })
+	} else if (props.link.to?.includes('@')) {
+		showContactForm.value = true
 	} else if (props.link.to) {
 		if (props.link.to.startsWith('http')) {
 			window.open(props.link.to, '_blank')
@@ -102,7 +106,10 @@ function handleClick() {
 }
 
 const isActive = computed(() => {
-	return props.link?.activeFor?.includes(router.currentRoute.value.name)
+	return (
+		props.link?.activeFor?.includes(router.currentRoute.value.name) ||
+		(props.activeTab && props.link?.label?.includes(props.activeTab))
+	)
 })
 
 const openModal = (link) => {