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

27
components/app/navbar.vue
View file

@ -82,20 +82,31 @@ if (route.path === "/search") {
</div> </div>
<div class="navbar-end gap-2"> <div class="navbar-end gap-2">
<!-- Search icon for mobile --> <!-- Search icon for mobile -->
<button <nuxt-link
to="/search"
class="btn btn-ghost sm:hidden" class="btn btn-ghost sm:hidden"
@click="router.push('/search')"
aria-label="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"> <svg
<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" /> 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> </svg>
</button> </nuxt-link>
<!-- Search bar for larger screens --> <!-- Search bar for larger screens -->
<recipe-search <recipe-search
v-model="searchQuery" v-model="searchQuery"
@search="handleSubmit" @search="handleSubmit"
class="hidden sm:flex" class="hidden sm:flex"
/> />
<button class="btn btn-primary" @click="handleRandomClick">Random</button> <button class="btn btn-primary" @click="handleRandomClick">Random</button>
</div> </div>