elk/pages/[[server]]/search.vue
patak e9740fe693
feat: separate search and explore (#2075)
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
2023-05-07 17:41:18 +02:00

33 lines
753 B
Vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
useHydratedHead({
title: () => t('nav.search'),
})
const search = $ref<{ input?: HTMLInputElement }>()
watchEffect(() => {
if (search?.input)
search?.input?.focus()
})
onActivated(() =>
search?.input?.focus(),
)
onDeactivated(() => search?.input?.blur())
</script>
<template>
<MainContent>
<template #title>
<NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:search-line class="rtl-flip" />
<span>{{ $t('nav.search') }}</span>
</NuxtLink>
</template>
<div px2 mt3>
<SearchWidget v-if="isHydrated" ref="search" m-1 />
</div>
</MainContent>
</template>