docs(app): use tabs to switch framework & module (#2837)

docs/app/components/FrameworkSelect.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-const { frameworks } = useSharedData()
+const { framework, frameworks } = useSharedData()
+
+const value = ref<string | undefined>(undefined)
+
+onMounted(() => {
+  value.value = framework.value
+})
 </script>
 
 <template>
-  <UDropdownMenu
-    v-slot="{ open }"
-    :modal="false"
+  <UTabs
+    v-model="value"
     :items="frameworks"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
-  >
-    <UButton
-      color="neutral"
-      variant="outline"
-      block
-      trailing-icon="i-lucide-chevron-down"
-      :class="[open && 'bg-[var(--ui-bg-elevated)]']"
-      :ui="{
-        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
-      }"
-    >
-      <template #leading>
-        <UIcon v-for="framework in frameworks" :key="framework.value" :name="framework.icon" :class="`${framework.value}-only`" class="shrink-0 size-5" />
-      </template>
-
-      <span v-for="framework in frameworks" :key="framework.value" :class="`${framework.value}-only`">
-        {{ framework.label }}
-      </span>
-    </UButton>
-  </UDropdownMenu>
+    :content="false"
+    color="neutral"
+    :ui="{ leadingIcon: 'group-data-[state=inactive]:grayscale' }"
+    @update:model-value="(framework = $event as string)"
+  />
 </template>

docs/app/components/Header.vue

@@ -71,11 +71,11 @@ defineShortcuts({
     </template>
 
     <template #content>
-      <UNavigationMenu orientation="vertical" :items="links" class="-ml-2.5" />
+      <UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
 
       <USeparator type="dashed" class="my-4" />
 
-      <div class="flex flex-col gap-2 w-[calc(100%+1rem)] mb-4 -mx-2">
+      <div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] mb-4 -mx-2.5">
         <ModuleSelect />
         <FrameworkSelect />
       </div>

docs/app/components/ModuleSelect.vue

@@ -1,32 +1,19 @@
 <script setup lang="ts">
-const { modules } = useSharedData()
+const { module, modules } = useSharedData()
+
+const value = ref<string | undefined>(undefined)
+
+onMounted(() => {
+  value.value = module.value
+})
 </script>
 
 <template>
-  <UDropdownMenu
-    v-slot="{ open }"
-    :modal="false"
+  <UTabs
+    v-model="value"
     :items="modules"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
-  >
-    <UButton
-      color="neutral"
-      variant="outline"
-      block
-      trailing-icon="i-lucide-chevron-down"
-      class="min-w-0"
-      :class="[open && 'bg-[var(--ui-bg-elevated)]']"
-      :ui="{
-        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
-      }"
-    >
-      <template #leading>
-        <UIcon v-for="module in modules" :key="module.value" :name="module.icon" :class="`${module.value}-only`" class="shrink-0 size-5" />
-      </template>
-
-      <span v-for="module in modules" :key="module.value" :class="`${module.value}-only`" class="truncate">
-        {{ module.label }}
-      </span>
-    </UButton>
-  </UDropdownMenu>
+    :content="false"
+    color="neutral"
+    @update:model-value="(module = $event as string)"
+  />
 </template>