can you help me to create something similar to
https://adminlte.io/themes/v3/iframe.html#
I have tried this

 <template>
  <div class="tabs" v-if="tabs">
    <nav class="tabs__nav">
      <RouterLink
        v-for="tab in tabs"
        :key="tab.name"
        class="tabs__nav-item"
        :to="{ name: tab.name }"
      >
        <span class="tabs__nav-icon material-symbols-outlined" v-if="tab.meta?.tabIcon">{{
          tab.meta.tabIcon
        }}</span>
        <span class="tabs__nav-label" v-if="tab.meta?.tabLabel">{{ tab.meta.tabLabel }}</span>
      </RouterLink>
    </nav>
    <div class="tabs__wrapper">
      <RouterView v-slot="{ Component }">
        <Transition name="fade" mode="out-in">
          <component :is="Component"></component>
        </Transition>
      </RouterView>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, type ComputedRef } from 'vue'
import { useRouter, RouterView, type RouteRecordRaw } from 'vue-router'

// Use children routes for the tabs
const router = useRouter()
const tabs: ComputedRef<RouteRecordRaw[] | undefined> = computed(() => {
  const currentRoute = router.currentRoute.value.name
  return router.options.routes?.find(
    (route) =>
      route.name === currentRoute || route.children?.find((child) => child.name === currentRoute)
  )?.children
})
</script>

but the tabs are added fixed as soon as the page is loaded, and what I need is to add a tab when a link is clicked on a sidebar.

any help would be appreciated