From b32c609a3b30642e661b7a48fb42f60f2b29cf53 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Feb 2025 18:13:34 +0100
Subject: [PATCH] fix z-index of mobile menu bar relative to directory
 search/filter; improve ui

---
 dev-dist/sw.js                   |  2 +-
 src/components/layout/Navbar.vue |  2 +-
 src/pages/Directory.vue          | 15 +++++++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 57264ad..db2a07b 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.301fc7pcvng"
+    "revision": "0.3s1v9t4dfmo"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 0bc6cde..d910edf 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -94,7 +94,7 @@ const handleLogout = () => {
 
     <!-- Mobile menu -->
     <div v-show="isOpen"
-      class="absolute left-0 right-0 top-14 z-50 border-b bg-background md:hidden
+      class="absolute left-0 right-0 top-14 z-[100] border-b bg-background md:hidden
         [@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
       <div class="container space-y-1 py-3">
         <router-link v-for="item in navigation" :key="item.name" :to="item.href"
diff --git a/src/pages/Directory.vue b/src/pages/Directory.vue
index 91b4295..d52c202 100644
--- a/src/pages/Directory.vue
+++ b/src/pages/Directory.vue
@@ -63,7 +63,7 @@ const filteredItems = computed(() => {
   <div class="container mx-auto px-4 py-2 md:py-8">
     <div class="space-y-4">
       <!-- Directory Header -->
-      <div class="text-center space-y-2 mb-6">
+      <div class="hidden md:block text-center space-y-2 mb-6">
         <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
           {{ t('directory.title') }}
         </h1>
@@ -72,13 +72,12 @@ const filteredItems = computed(() => {
         </p>
       </div>
 
-      <!-- Directory Filter -->
-      <DirectoryFilter
-        v-model:category="category"
-        v-model:search="search"
-        v-model:town="town"
-        class="sticky top-0 z-50 -mx-4 px-4 py-2 bg-background/95 backdrop-blur-sm border-b w-screen left-0"
-      />
+      <!-- Sticky Container for Filter -->
+      <div class="sticky top-14 z-40 -mx-4 bg-background/95 backdrop-blur-sm border-b w-screen left-0">
+        <div class="container mx-auto px-4">
+          <DirectoryFilter v-model:category="category" v-model:search="search" v-model:town="town" class="py-4" />
+        </div>
+      </div>
 
       <!-- Directory Grid -->
       <DirectoryGrid :items="filteredItems" class="pt-4" />