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

ref: make the navbar responsive on small screens

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

21
components/app/navbar.vue
View file

@ -82,15 +82,26 @@ 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"