36 lines
2.3 KiB
Markdown
36 lines
2.3 KiB
Markdown
# Project: Premium Mega Menu
|
|
|
|
## Architecture
|
|
- **Database Schema**: Update `Menu` and `MenuItem` models in Prisma schema (`apps/backend/prisma/schema.prisma`) to support `rootImage`, `columnImage`, and `hoverImage` fields.
|
|
- **Backend API**: `apps/backend/src/routes/menus.ts` handles saving and loading the menu tree payload and database fields.
|
|
- **MCP Server**: `apps/mcp-server/index.ts` and tool suite handles querying, modifying, and auditing menu structure.
|
|
- **Admin Panel UI**: `apps/admin/src/pages/MenuManagerPage.tsx` and `apps/spa/src/components/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` allow configuring and rendering the 3-image layout.
|
|
- **Storefront UI**: `apps/website/src/components/navigation/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` render the 3-image layout using `next/image` with lazy loading and fade-in micro-animations.
|
|
|
|
## Milestones
|
|
| # | Name | Scope | Dependencies | Status |
|
|
|---|------|-------|-------------|--------|
|
|
| M1 | E2E Testing Track | Create requirement-driven E2E tests for the 3-image mega menu layout. | None | PLANNED |
|
|
| M2 | DB & Backend Updates | Prisma migration, backend routes & schemas, and MCP tools updates. | None | PLANNED |
|
|
| M3 | Storefront & Admin UI | Implement admin configuration UI and Next.js storefront image rendering. | M2 | PLANNED |
|
|
| M4 | E2E & Adversarial Hardening | Pass E2E tests, add adversarial tests, run integrity audit. | M1, M3 | PLANNED |
|
|
|
|
## Interface Contracts
|
|
### Database Schema
|
|
- `Menu` model: `rootImage String?`
|
|
- `MenuItem` model: `columnImage String?`, `hoverImage String?`
|
|
|
|
### MegaMenuPayload Type Definitions
|
|
- `MegaMenuPayload`: `{ rootImage?: string; ... }`
|
|
- `MenuColumn`: `{ columnImage?: string; ... }`
|
|
- `MenuLink`: `{ hoverImage?: string; ... }`
|
|
|
|
## Code Layout
|
|
- **Database**: `apps/backend/prisma/schema.prisma`
|
|
- **Shared Types**: `packages/types/index.ts`
|
|
- **Backend Routes**: `apps/backend/src/routes/menus.ts`
|
|
- **MCP Server**: `apps/mcp-server/menu-tools.ts`, `apps/mcp-server/menu-toolkit.ts`
|
|
- **Admin UI**: `apps/admin/src/pages/MenuManagerPage.tsx`
|
|
- **SPA UI**: `apps/spa/src/components/DesktopMegaMenu.tsx`, `apps/spa/src/components/MobileDrawer.tsx`, `apps/spa/src/store/menuStore.ts`
|
|
- **Website UI**: `apps/website/src/components/navigation/DesktopMegaMenu.tsx`, `apps/website/src/components/navigation/menuTypes.ts`
|