ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add mobile search icon and responsive search bar in navbar

Browse source
This commit is contained in:
Ruidy (aider) 2024-12-16 21:38:08 +01:00
parent 55d857e658
commit 534a98b36f
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/app/navbar.vue
View file

@ -81,7 +81,22 @@ if (route.path === "/search") {
</ul> </ul>
</div> </div>
<div class="navbar-end gap-2"> <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> <button class="btn btn-primary" @click="handleRandomClick">Random</button>
</div> </div>
</nav> </nav>