fix: improve landing nav menus

frontend/src/features/landing/components/LandingSiteMenu.vue

@@ -13,14 +13,31 @@
                 class="site-nav"
                 :aria-label="t('public.nav.ariaLabel')"
             >
-                <div class="site-nav-group site-nav-product">
+                <div
-                    <button type="button">{{ t('public.nav.product') }}</button>
+                    ref="productMenuRef"
-                    <div class="site-product-panel">
+                    class="site-nav-group site-nav-product"
+                    @pointerenter="openProductMenu"
+                    @pointerleave="scheduleProductMenuClose"
+                    @focusin="openProductMenu"
+                    @focusout="scheduleProductMenuClose"
+                >
+                    <button
+                        type="button"
+                        :aria-expanded="isProductMenuOpen"
+                        aria-haspopup="true"
+                    >
+                        {{ t('public.nav.product') }}
+                    </button>
+                    <div
+                        class="site-product-panel"
+                        :class="{ open: isProductMenuOpen }"
+                    >
                         <router-link
                             v-for="feature in productFeatureItems"
                             :key="feature.slug"
                             class="site-product-link"
                             :to="`/product/${feature.slug}`"
+                            @click="closeProductMenu"
                         >
                             <span class="site-product-icon">
                                 <svg
@@ -38,11 +55,38 @@
                     </div>
                 </div>
                 <router-link to="/pricing">{{ t('public.nav.pricing') }}</router-link>
-                <div class="site-nav-group">
+                <div
-                    <button type="button">{{ t('public.nav.resources') }}</button>
+                    ref="resourcesMenuRef"
-                    <div class="site-nav-menu">
+                    class="site-nav-group"
-                        <router-link to="/blogs">{{ t('public.nav.blogs') }}</router-link>
+                    @pointerenter="openResourcesMenu"
-                        <router-link to="/guides">{{ t('public.nav.guides') }}</router-link>
+                    @pointerleave="scheduleResourcesMenuClose"
+                    @focusin="openResourcesMenu"
+                    @focusout="scheduleResourcesMenuClose"
+                >
+                    <button
+                        type="button"
+                        :aria-expanded="isResourcesMenuOpen"
+                        aria-haspopup="true"
+                        @click="toggleResourcesMenu"
+                    >
+                        {{ t('public.nav.resources') }}
+                    </button>
+                    <div
+                        class="site-nav-menu"
+                        :class="{ open: isResourcesMenuOpen }"
+                    >
+                        <router-link
+                            to="/blogs"
+                            @click="closeResourcesMenu"
+                        >
+                            {{ t('public.nav.blogs') }}
+                        </router-link>
+                        <router-link
+                            to="/guides"
+                            @click="closeResourcesMenu"
+                        >
+                            {{ t('public.nav.guides') }}
+                        </router-link>
                     </div>
                 </div>
             </nav>
@@ -78,7 +122,7 @@
 </template>
 
 <script setup>
-    import { computed, onMounted } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { useAuthStore } from '@/features/auth/stores/authStore.js';
     import { productFeatureItems } from '@/features/landing/productFeatures.js';
@@ -87,6 +131,12 @@
     const localeStorageKey = 'user-locale';
     const authStore = useAuthStore();
     const { locale, t } = useI18n();
+    const isProductMenuOpen = ref(false);
+    const isResourcesMenuOpen = ref(false);
+    const productMenuRef = ref(null);
+    const resourcesMenuRef = ref(null);
+    let productMenuCloseTimer = null;
+    let resourcesMenuCloseTimer = null;
 
     const authLink = computed(() =>
         authStore.isAuthenticated
@@ -114,6 +164,77 @@
         }
     }
 
+    function clearProductMenuCloseTimer() {
+        if (productMenuCloseTimer === null) {
+            return;
+        }
+
+        window.clearTimeout(productMenuCloseTimer);
+        productMenuCloseTimer = null;
+    }
+
+    function clearResourcesMenuCloseTimer() {
+        if (resourcesMenuCloseTimer === null) {
+            return;
+        }
+
+        window.clearTimeout(resourcesMenuCloseTimer);
+        resourcesMenuCloseTimer = null;
+    }
+
+    function openProductMenu() {
+        clearProductMenuCloseTimer();
+        isProductMenuOpen.value = true;
+    }
+
+    function openResourcesMenu() {
+        clearResourcesMenuCloseTimer();
+        isResourcesMenuOpen.value = true;
+    }
+
+    function closeProductMenu() {
+        clearProductMenuCloseTimer();
+        isProductMenuOpen.value = false;
+    }
+
+    function closeResourcesMenu() {
+        clearResourcesMenuCloseTimer();
+        isResourcesMenuOpen.value = false;
+    }
+
+    function toggleResourcesMenu() {
+        clearResourcesMenuCloseTimer();
+        isResourcesMenuOpen.value = !isResourcesMenuOpen.value;
+    }
+
+    function scheduleProductMenuClose() {
+        clearProductMenuCloseTimer();
+
+        productMenuCloseTimer = window.setTimeout(() => {
+            const activeElement = document.activeElement;
+
+            if (productMenuRef.value?.contains(activeElement)) {
+                return;
+            }
+
+            closeProductMenu();
+        }, 120);
+    }
+
+    function scheduleResourcesMenuClose() {
+        clearResourcesMenuCloseTimer();
+
+        resourcesMenuCloseTimer = window.setTimeout(() => {
+            const activeElement = document.activeElement;
+
+            if (resourcesMenuRef.value?.contains(activeElement)) {
+                return;
+            }
+
+            closeResourcesMenu();
+        }, 120);
+    }
+
     onMounted(() => {
         const storedLocale = window.sessionStorage.getItem(localeStorageKey);
 
@@ -121,6 +242,11 @@
             locale.value = storedLocale;
         }
     });
+
+    onBeforeUnmount(() => {
+        clearProductMenuCloseTimer();
+        clearResourcesMenuCloseTimer();
+    });
 </script>
 
 <style scoped>
@@ -155,7 +281,7 @@
     }
 
     .site-nav a {
-        @apply rounded-full px-4 py-2 text-sm font-semibold no-underline transition-colors;
+        @apply rounded-[0.65rem] px-4 py-2 text-sm font-semibold no-underline transition-colors;
         color: #44516a;
     }
 
@@ -170,7 +296,7 @@
     }
 
     .site-nav-group > button {
-        @apply rounded-full px-4 py-2 text-sm font-semibold transition-colors;
+        @apply rounded-[0.65rem] px-4 py-2 text-sm font-semibold transition-colors;
         color: #44516a;
     }
 
@@ -182,7 +308,8 @@
     }
 
     .site-nav-group:hover .site-nav-menu,
-    .site-nav-group:focus-within .site-nav-menu {
+    .site-nav-group:focus-within .site-nav-menu,
+    .site-nav-menu.open {
         @apply visible opacity-100;
     }
 
@@ -191,14 +318,15 @@
     }
 
     .site-product-panel {
-        @apply invisible absolute left-1/2 top-[calc(100%+0.5rem)] grid w-[min(56rem,calc(100vw-2rem))] -translate-x-1/2 grid-cols-3 gap-2 rounded-[1.25rem] border p-3 opacity-0 transition-opacity;
+        @apply invisible absolute left-1/2 top-full grid w-[min(56rem,calc(100vw-2rem))] -translate-x-1/2 grid-cols-3 gap-2 rounded-[1.25rem] border p-3 opacity-0 transition-opacity;
         background: rgba(255, 255, 255, 0.98);
         border-color: rgba(23, 32, 51, 0.08);
         box-shadow: 0 24px 60px rgba(23, 32, 51, 0.14);
     }
 
     .site-nav-product:hover .site-product-panel,
-    .site-nav-product:focus-within .site-product-panel {
+    .site-nav-product:focus-within .site-product-panel,
+    .site-product-panel.open {
         @apply visible opacity-100;
     }
 
@@ -252,7 +380,7 @@
     }
 
     .site-login {
-        @apply flex h-10 items-center rounded-full px-4 text-sm font-bold no-underline transition-colors;
+        @apply flex h-10 min-w-[7.75rem] items-center justify-center rounded-full px-4 text-sm font-bold no-underline transition-colors;
         background: #172033;
         color: #fffaf2;
     }