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).
This commit is contained in:
2026-09-17 14:17:46 +00:00
parent 21e99bb52b
commit ee2f421709
7 changed files with 127 additions and 11 deletions
@@ -0,0 +1,20 @@
# Tasks
## 1. CategoryMenu pinned mode
- [x] 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
- [x] 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
- [x] 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
- [x] 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
- [x] 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
- [x] 4.1 Run `pnpm --filter @vmall/mall build` and confirm it passes
- [x] 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