# 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