From a1bc45941da247a4fe21fa61dbd8a0725189c58f Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Mon, 16 Dec 2024 21:42:38 +0100
Subject: [PATCH] ref: make the navbar responsive on small screens

---
 components/app/navbar.vue | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index 002dea5..7eb28bd 100644
--- a/components/app/navbar.vue
+++ b/components/app/navbar.vue
@@ -82,20 +82,31 @@ if (route.path === "/search") {
     </div>
     <div class="navbar-end gap-2">
       <!-- Search icon for mobile -->
-      <button 
+      <nuxt-link
+        to="/search"
         class="btn btn-ghost sm:hidden"
-        @click="router.push('/search')"
         aria-label="Search"
       >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
         </svg>
-      </button>
+      </nuxt-link>
       <!-- Search bar for larger screens -->
-      <recipe-search 
-        v-model="searchQuery" 
+      <recipe-search
+        v-model="searchQuery"
         @search="handleSubmit"
-        class="hidden sm:flex" 
+        class="hidden sm:flex"
       />
       <button class="btn btn-primary" @click="handleRandomClick">Random</button>
     </div>