feat(landing): add mobile responsive design with hamburger menu by chris-stinemetz · Pull Request #215 · Context-Engine-AI/Context-Engine

chris-stinemetz · 2026-02-03T13:45:46Z

Add slide-out mobile navigation menu with overlay
Stack hero section vertically with adjusted font sizes
Convert graph section to vertical layout on mobile
Make forms and buttons full-width on small screens
Add touch-friendly tap targets and spacing
Hide animated graph lines on mobile for cleaner UX
Responsive adjustments for features, demo, and footer sections

- Add slide-out mobile navigation menu with overlay - Stack hero section vertically with adjusted font sizes - Convert graph section to vertical layout on mobile - Make forms and buttons full-width on small screens - Add touch-friendly tap targets and spacing - Hide animated graph lines on mobile for cleaner UX - Responsive adjustments for features, demo, and footer sections

augmentcode · 2026-02-03T13:47:53Z

🤖 Augment PR Summary

Summary: Improves the landing page experience on tablet/mobile by introducing a hamburger-based navigation and reflowing sections for small screens.

Changes:

Adds a state-driven mobile menu in src/routes/+layout.svelte with a toggle icon, overlay, and close behavior (link click, Escape key, and resize past the breakpoint).
Hides desktop-only header CTAs at ≤1024px via a new .desktop-only utility and shows a dedicated mobile menu button instead.
Introduces responsive SCSS rules for hero, graph, features, demo, footer, and contact sections to stack layouts and increase touch-friendly spacing.
Makes forms/buttons full-width on small screens and simplifies the graph presentation on mobile by switching to a vertical layout and hiding the canvas lines.

Technical Notes: The menu/overlay are breakpoint-gated (≤1024px) and use fixed positioning starting below the 64px header to avoid covering header controls.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

src/app.scss

src/routes/+layout.svelte

- Fix overlay to use role=presentation instead of role=button - Add rel=noopener noreferrer to external links in mobile menu - Show mobile menu at 1024px to match when desktop nav hides

chris-stinemetz · 2026-02-03T13:53:24Z

augment review

augmentcode

Review completed. 2 suggestions posted.

Comment augment review to trigger a new review at any time.

src/routes/+layout.svelte

- Move Escape key handler to document level for global coverage - Simplify overlay with role=none instead of conflicting attributes

chris-stinemetz · 2026-02-03T13:59:02Z

augment review

augmentcode

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

src/app.scss

chris-stinemetz · 2026-02-03T14:03:59Z

augment review

augmentcode

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

src/routes/+layout.svelte

chris-stinemetz · 2026-02-03T14:39:53Z

augment review

augmentcode

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-02-03T14:42:40Z

src/routes/+layout.svelte

 	let { children } = $props();

 	let theme = $state('dark');
+	let mobileMenuOpen = $state(false);


Because mobileMenuOpen is state-driven but visibility is breakpoint-driven in CSS, resizing from <=1024px to >1024px can leave the menu logically “open” but hidden, and it may reappear open when resizing back. Consider resetting/closing the menu when crossing the breakpoint (or on navigation) to avoid surprising UI state.

Severity: low

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

chris-stinemetz · 2026-02-03T14:45:19Z

augment review

augmentcode

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-02-03T14:47:37Z

src/routes/+layout.svelte

+			onclick={toggleMobileMenu}
+			aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+			aria-expanded={mobileMenuOpen}
+			aria-controls="mobile-menu"


aria-controls="mobile-menu" points to an element that is only conditionally rendered, so when the menu is closed assistive tech may be referencing a non-existent controlled element. Consider rendering the nav#mobile-menu persistently (toggling visibility) or only setting aria-controls when the menu is present.

Severity: low

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}