jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve landing nav menus

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-05 11:33:54 -04:00
parent feef8cbafd
commit 5baacbceea
1 changed files with 143 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
frontend/src/features/landing/components/LandingSiteMenu.vue
View File

@@ -13,14 +13,31 @@
class="site-nav"
:aria-label="t('public.nav.ariaLabel')"
>
<div class="site-nav-group site-nav-product">
<button type="button">{{ t('public.nav.product') }}</button>
<div class="site-product-panel">
<div
ref="productMenuRef"
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">
<button type="button">{{ t('public.nav.resources') }}</button>
<div class="site-nav-menu">
<router-link to="/blogs">{{ t('public.nav.blogs') }}</router-link>
<router-link to="/guides">{{ t('public.nav.guides') }}</router-link>
<div
ref="resourcesMenuRef"
class="site-nav-group"
@pointerenter="openResourcesMenu"
@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;
}