From 534a98b36f88473b3bbf6755f1ff046458dbc8a4 Mon Sep 17 00:00:00 2001
From: "Ruidy (aider)" <ruidy.nemausat@gmail.com>
Date: Mon, 16 Dec 2024 21:38:08 +0100
Subject: [PATCH] feat: Add mobile search icon and responsive search bar in
 navbar

---
 components/app/navbar.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index 0a1d5e3..002dea5 100644
--- a/components/app/navbar.vue
+++ b/components/app/navbar.vue
@@ -81,7 +81,22 @@ if (route.path === "/search") {
       </ul>
     </div>
     <div class="navbar-end gap-2">
-      <recipe-search v-model="searchQuery" @search="handleSubmit" />
+      <!-- Search icon for mobile -->
+      <button 
+        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>
+      </button>
+      <!-- Search bar for larger screens -->
+      <recipe-search 
+        v-model="searchQuery" 
+        @search="handleSubmit"
+        class="hidden sm:flex" 
+      />
       <button class="btn btn-primary" @click="handleRandomClick">Random</button>
     </div>
   </nav>