james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mall): pin home category menu beside hero carousel

Browse Source 
Home hero becomes a 450px flex row with a pinned 240x450 category rail
(ShellCategoryMenu `pinned` mode) left of the 960px center-cropped
carousel; hovering a top-level category expands the mega-menu over the
carousel. The header no longer collapses on scroll, and its category
dropdown is now hover-only on non-home pages.

OpenSpec change: openspec/changes/pin-home-category-menu

BREAKING CHANGE: the header logo/search/cart bar no longer auto-hides
past 200px of scroll, and the home page no longer shows the header
category dropdown (it is pinned in the hero row instead).
This commit is contained in:
james
2026-09-17 14:17:46 +00:00
parent 21e99bb52b
commit ee2f421709
7 changed files with 127 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mall/components/shell/SiteHeader.vue
+4 -9
View File
@@ -32,19 +32,14 @@ onMounted(async () => {
const menuOpen = ref(false);
const isHome = computed(() => route.path === "/");
const collapsed = ref(false);
onMounted(() => {
const onScroll = (): void => {
collapsed.value = window.scrollY > 200;
};
window.addEventListener("scroll", onScroll, { passive: true });
});
const showMenu = computed(() => menuOpen.value || (isHome.value && !collapsed.value));
// The home page pins the category menu in the hero row instead, so the header
// dropdown is hover-only and only on non-home pages.
const showMenu = computed(() => menuOpen.value && !isHome.value);
</script>
<template>
<header class="hdr">
<div v-show="!collapsed" class="w1200 hdr-top">
<div class="w1200 hdr-top">
<NuxtLink to="/" class="logo">VMall</NuxtLink>
<div class="search-box">
<input