Mobile Menu

Free — GPL coresize Mplanned, not built

Generated from docs/plan/core/mobile-menu/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Mobile Menu is a core feature that provides a responsive, touch-friendly navigation menu for mobile devices. It includes hamburger menu icon, slide-out drawer, and collapsible categories.

The problem

Merchants’ navigation doesn’t adapt to phones; customers can’t navigate on mobile and abandon carts.

What it does

• Hamburger menu icon for mobile (<768px screens) with slide-out drawer (left or right)
• Collapsible category items (tap to expand/collapse) with back navigation to parent
• Search bar and cart/account links in mobile menu with touch-friendly spacing (44x44px min)
• Swipe to close menu drawer with customizable animation style
• Admin dashboard: preview mobile menu on different screen sizes
• Mobile menu settings: drawer position, animation style

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• Does NOT support custom mobile menu layout (reason: responsive design standard)
• Does NOT provide CSS styling (reason: frontend theme responsibility)
• Does NOT support mobile menu for secondary navigation (reason: main nav scope)
• Does NOT include app-like features (reason: separate mobile app feature)

Data model

No new tables (reuses menu_items structure). New fields: settings.mobile_menu_position (enum: ‘left’, ‘right’), settings.mobile_menu_animation (enum: ‘slide’, ‘fade’).

API

• GET /api/menus/:id/mobile-menu
• GET /api/settings/mobile-menu
• PATCH /api/settings/mobile-menu {position, animation}

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Settings panel (drawer position, animation); mobile menu preview on iPhone/Android sizes; link validation ensure all items render.

The seam — why this is core

Core owns: mobile menu settings, API, preview. Frontend owns: responsive styling, touch handling, hamburger icon.

Core owns the interface + honest responsive menu; mobile navigation is storefront infrastructure, not a per-country obligation or credential.

Dependencies

• Assumes menu_items API exists
• Assumes responsive design system in frontend

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• Mobile menu appears on screens <768px
• Hamburger icon touch-friendly (44x44px min)
• Menu drawer slides out smoothly
• Categories collapsible (tap arrow to expand)
• Swipe right/left closes menu drawer
• Mobile menu includes search, cart, account links
• All storage drivers support settings equally
• Menu fully navigable on mobile without desktop scroll

Risks

Performance: 1000+ items slow on low-end phones. Gesture conflicts: swipe to close may conflict with page scroll. Animation janky if not GPU-accelerated.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.