1 files changed, 21 insertions, 3 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