Files

T

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

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).

2026-09-17 14:17:46 +00:00

1.9 KiB

Raw Blame History

Tasks

1. CategoryMenu pinned mode

1.1 Add a pinned boolean prop to apps/mall/components/shell/CategoryMenu.vue; when pinned is true, render .catmenu in-flow (position: relative; top: auto; width: 240px) instead of the absolute 960px dropdown, and keep the default (dropdown) rendering unchanged for the header use
1.2 In pinned mode, keep the .lvl1 sidebar at 240px wide and 450px tall, and reposition the .sub flyout as position: absolute; left: 240px; top: 0; width: ~700px; height: 450px so it overlays the carousel area to the right; keep existing hover state, links, and i18n untouched

2. Home hero row

2.1 In apps/mall/pages/index.vue, change the .hero block to a flex row: <ShellCategoryMenu pinned /> followed by UiCarousel; fix the row height at 450px so the sidebar and carousel align
2.2 Ensure banner images center-crop horizontally at the new ~950px carousel width (fixed 450px height, object-fit: cover — verify UiCarousel already applies this, adjust if not); do not modify the mock SVG assets

3. Header cleanup

3.1 In apps/mall/components/shell/SiteHeader.vue, remove the collapsed ref, the scroll listener, and the v-show="!collapsed" on .hdr-top; reduce showMenu to menuOpen && !isHome so the header mega-menu is hover-only and suppressed on the home page, where the category menu is pinned in the hero row instead (per specs/frontend-mall/spec.md; decision confirmed during apply)

4. Verification

4.1 Run pnpm --filter @vmall/mall build and confirm it passes
4.2 Start the mall dev server and verify in a real browser: home shows the pinned sidebar left of the cropped carousel with no hover; scrolling past 200px keeps both the header and sidebar visible; hovering a top-level category expands the panel over the carousel; a non-home page (e.g. /search) shows the hover dropdown and no pinned sidebar

1.9 KiB Raw Blame History

Tasks

1. CategoryMenu pinned mode

2. Home hero row

3. Header cleanup

4. Verification

1.9 KiB

Raw Blame History