feat: integration search bar

web/src/components/SectionIndex.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 	active: string
 }>()
 
-const emit = defineEmits<{ select: [id: string] }>()
+const emit = defineEmits<{ select: [id: string]; search: [trigger: HTMLElement | null] }>()
 
 const activeLabel = computed(
 	() => props.sections.find((section) => section.id === props.active)?.label ?? '',
@@ -22,6 +22,10 @@ const activeLabel = computed(
 function onJump(id: string) {
 	emit('select', id)
 }
+
+function onSearch(event: MouseEvent) {
+	emit('search', event.currentTarget as HTMLElement | null)
+}
 </script>
 
 <template>
@@ -51,7 +55,7 @@ function onJump(id: string) {
 	</nav>
 
 	<div
-		class="sticky -top-4 z-5 order-first -mx-4 -mt-4 mb-4 border-b border-default bg-default px-4 py-2 lg:hidden"
+		class="sticky -top-4 z-5 order-first -mx-4 -mt-4 mb-4 flex items-center gap-2 border-b border-default bg-default px-4 py-2 lg:hidden"
 	>
 		<USelectMenu
 			:model-value="active"
@@ -63,7 +67,7 @@ function onJump(id: string) {
 			:aria-label="t('Jump to section')"
 			color="neutral"
 			variant="outline"
-			class="w-full"
+			class="min-w-0 flex-1"
 			:content="{ sideOffset: 4 }"
 			:ui="{
 				base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 hover:bg-default',
@@ -80,5 +84,15 @@ function onJump(id: string) {
 				}}</span>
 			</span>
 		</USelectMenu>
+		<UButton
+			icon="i-lucide-search"
+			color="neutral"
+			variant="outline"
+			:aria-label="t('Search the API reference')"
+			aria-haspopup="dialog"
+			class="size-11 shrink-0 justify-center rounded-none border border-accented bg-default text-highlighted ring-0 hover:bg-default"
+			:ui="{ leadingIcon: 'size-4.5' }"
+			@click="onSearch"
+		/>
 	</div>
 </template>