2.3 KiB
2.3 KiB
Project: Premium Mega Menu
Architecture
- Database Schema: Update
MenuandMenuItemmodels in Prisma schema (apps/backend/prisma/schema.prisma) to supportrootImage,columnImage, andhoverImagefields. - Backend API:
apps/backend/src/routes/menus.tshandles saving and loading the menu tree payload and database fields. - MCP Server:
apps/mcp-server/index.tsand tool suite handles querying, modifying, and auditing menu structure. - Admin Panel UI:
apps/admin/src/pages/MenuManagerPage.tsxandapps/spa/src/components/DesktopMegaMenu.tsx/MobileDrawer.tsxallow configuring and rendering the 3-image layout. - Storefront UI:
apps/website/src/components/navigation/DesktopMegaMenu.tsx/MobileDrawer.tsxrender the 3-image layout usingnext/imagewith 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
Menumodel:rootImage String?MenuItemmodel: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