Files

T

james 44466e5e88 docs(openspec): archive pin-home-category-menu

Move the completed change to
openspec/changes/archive/2026-09-17-pin-home-category-menu/ and merge its
delta into openspec/specs/frontend-mall/spec.md.

Modified requirements:
- B2B2C mall-style PC storefront shell: the header stays fully visible
  while scrolling (no scroll-based auto-hide), and the category mega-menu
  is a hover dropdown on every page except home, where it is pinned in
  the hero row. Adds the "header persists while scrolling" and "hover
  categories on a non-home page" scenarios.
- Mock PC home page: the hero row is a pinned 240px category sidebar plus
  a carousel filling the remainder, both 450px tall, with the mega-menu
  overlaying the carousel and banners center-cropped. Adds the "sidebar
  stays while scrolling" and "expand a category" scenarios.

2026-09-17 14:23:18 +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