chore: update VerticalTabs component to use setActiveTab method and emit active tab changes

Author: yaroslav8765

adminforth/spa/src/afcl/VerticalTabs.vue

@@ -4,8 +4,8 @@
       <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
         <a 
           href="#"
-          @click="activeTab = tab"
-          class="inline-flex items-center rounded-lg w-full"
+          @click="setActiveTab(tab)"
+          class="inline-flex items-center px-4 py-3 rounded-lg w-full"
           :class="tab === activeTab ? 'text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
           aria-current="page"
         >
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, useSlots, ref, type Ref } from 'vue';
+import { onMounted, useSlots, ref, type Ref } from 'vue';
   const tabs : Ref<string[]> = ref([]);
   const activeTab = ref('');
   const props = defineProps({
@@ -52,6 +52,7 @@
   function setActiveTab(tab: string) {
     if (tabs.value.includes(tab)) {
       activeTab.value = tab;
+      emites('update:activeTab', tab);
     }
   }
 </script>

adminforth/spa/src/views/SettingsView.vue

@@ -74,9 +74,9 @@
     <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
       <p>No setting pages configured or still loading...</p>
     </div>
-    <VerticalTabs v-else ref="VerticalTabsRef">
+      <VerticalTabs v-else ref="VerticalTabsRef" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
       <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+settingPageSlotName(c,i)]>
-        <div class="flex items-center justify-center whitespace-nowrap px-8 py-3 gap-2" @click="setURL(c)">
+        <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
           <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
           {{ c.pageLabel }}
         </div>
@@ -199,10 +199,8 @@ function slugifyString(str: string): string {
 }
 
 function setURL(item: {
-  icon?: string | undefined;
   pageLabel: string;
   slug?: string | undefined;
-  component?: string | undefined;
 }) {
   const slug = item?.slug;
   if (slug) {