diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Header.vue | 24 | ||||
| -rw-r--r-- | components/Stream.vue | 2 |
2 files changed, 22 insertions, 4 deletions
diff --git a/components/Header.vue b/components/Header.vue index 7789caf..b1699d1 100644 --- a/components/Header.vue +++ b/components/Header.vue @@ -3,8 +3,26 @@ <NuxtLink to="/"> <h1 class="text-secondary text-4xl font-bold">hiruki</h1> </NuxtLink> - <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75"> + <button type="button" @click="toggle = !toggle" + class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75"> <Icon name="heroicons-solid:magnifying-glass" /> - </NuxtLink> + </button> + <div v-show="toggle" class="absolute flex items-center right-4 top-16 gap-2"> + <input type="text" placeholder="Search" @keypress.enter="getSearch" v-model.trim="query" + class="text-primary bg-sub border-primary border rounded-sm outline-none + py-1 px-2 focus:border-secondary" /> + </div> </section> -</template>
\ No newline at end of file +</template> + +<script setup> +const router = useRouter(); +const toggle = ref(false); +const query = ref(""); + +const getSearch = () => { + if (query.value !== "") { + router.push(`/search/${query.value}`); + } +}; +</script>
\ No newline at end of file diff --git a/components/Stream.vue b/components/Stream.vue index 75aae66..b59563f 100644 --- a/components/Stream.vue +++ b/components/Stream.vue @@ -91,7 +91,7 @@ const router = useRouter(); const getEpisode = (event) => { const value = event.target.value if (value) { - router.push(`/e/${id}/${value}`) + router.push(`/e/${id}/${value}`); } } </script>
\ No newline at end of file |