Add Mobile Menu with lifecycle-phase accordion for Services - #16
Conversation
- New parts/mobile-menu.html template part, registered in theme.json, wired to the header's core/navigation via Ollie Menu Designer's mobileMenuSlug (drawer breakpoint raised to 1024px so tablets get it too, not just phones)
- All 8 real nav items in order (Work, Solutions, Services, Systems, Pricing, Insights, About, Contact); 6 use native core/details accordions reusing the theme's existing chevron/hover mechanism, with Systems and Contact as plain links
Services accordion is phase-grouped (Discover → Evolve) with colour-coded dots and dashed dividers between phase groups, content ported from the existing desktop Services mega menu
Footer CTAs (Book a consultation / Start a project) reuse the existing button-secondary / button-secondary-outline styles
Added add_theme_support('custom-logo') so core/site-logo renders in the menu's logo row
New src/scss/animations/_mobile-menu-motion.scss: styles WP core's native overlay close button to match the header's icon-button treatment, aligns the logo row with it, and normalizes row height/spacing across all accordion and link rows
brandonmarshal
added
area:navigation
|
Warning Review limit reached
Next review available in: 26 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Note
|
| Layer / File(s) | Summary |
|---|---|
Mobile menu registration and navigation wiring functions.php, theme.json, patterns/header.php |
Custom logo support and the mobile-menu template part are registered, and header navigation is configured to activate the drawer at 1024px. |
Mobile menu structure and actions parts/mobile-menu.html |
The template part adds the logo area, Work, Solutions, Services, Pricing, Insights, and About accordions, standalone links, and two action buttons. |
Mobile drawer styling and motion src/scss/animations.scss, src/scss/animations/_mobile-menu-motion.scss, assets/css/animations.css |
Drawer controls, accordion rows, links, CTAs, separators, branding, logo sizing, and reduced-motion behavior are styled in source and compiled CSS. |
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Visitor
participant HeaderNavigation
participant MobileMenuDrawer
participant BrowserStyles
Visitor->>HeaderNavigation: Opens navigation below 1024px
HeaderNavigation->>MobileMenuDrawer: Activates mobileMenuSlug drawer
MobileMenuDrawer->>BrowserStyles: Applies drawer and accordion styles
Visitor->>MobileMenuDrawer: Expands a menu section or selects an action
Suggested labels: comp:template-parts, comp:block-patterns, lang:json
Suggested reviewers: zaredrogers, krugazul, ashleyshaw
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly summarizes the main change: adding a mobile menu with a Services accordion. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
- Fix failing CI checks
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/mobile-menu
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
|
Tick the box to add this pull request to the merge queue (same as
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@parts/mobile-menu.html`:
- Around line 9-213: Replace every placeholder href in the mobile menu,
including service, solution, case-study, and CTA links, with the corresponding
real deployment-independent destination; also replace any localhost URLs in the
affected navigation entries. Update the anchors throughout the mobile-menu
accordion sections and preserve each item’s existing label and structure.
In `@patterns/header.php`:
- Line 18: Update the file header docblock in patterns/header.php to include the
project’s required `@package` tag, placing it at the indicated position near the
top of the file while preserving the existing navigation markup.
In `@src/scss/animations/_mobile-menu-motion.scss`:
- Around line 114-116: Update the mobile drawer focus handling around
&:focus-within in src/scss/animations/_mobile-menu-motion.scss:114-116 to add a
visible :focus-visible outline or ring for accordion summaries and plain menu
links instead of removing focus treatment; regenerate the corresponding compiled
styles in assets/css/animations.css:1587-1589 from the corrected Sass source.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: 667f40fc-ef29-4bd9-9a36-cd292c3f0ddd
📒 Files selected for processing (7)
assets/css/animations.cssfunctions.phpparts/mobile-menu.htmlpatterns/header.phpsrc/scss/animations.scsssrc/scss/animations/_mobile-menu-motion.scsstheme.json
There was a problem hiding this comment.
Pull request overview
This PR introduces a new mobile navigation drawer (driven by Ollie Menu Designer’s mobileMenuSlug) and associated styling, wiring it into the existing header Navigation block and adding the theme support needed for a Site Logo row within the drawer.
Changes:
- Registers a new
mobile-menutemplate part and adds a newparts/mobile-menu.htmldrawer layout. - Adds mobile-menu-specific motion/layout styles via a new Sass partial and includes it in the animations bundle.
- Enables
custom-logotheme support socore/site-logorenders in the mobile menu.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
theme.json |
Registers the new mobile-menu template part so it’s discoverable/usable by WordPress. |
parts/mobile-menu.html |
Adds the drawer’s block markup (brand row, accordions, links, CTAs). |
patterns/header.php |
Wires the header core/navigation to the new mobile menu via mobileMenuSlug and breakpoint settings. |
functions.php |
Adds add_theme_support( 'custom-logo' ) to enable the Site Logo block output. |
src/scss/animations/_mobile-menu-motion.scss |
Introduces styling for the responsive container close button and drawer row normalisation. |
src/scss/animations.scss |
Includes the new mobile menu motion partial in the animations build. |
assets/css/animations.css |
Updates compiled animations CSS to include the new mobile menu styles. |
Comments suppressed due to low confidence (2)
parts/mobile-menu.html:319
- Avoid environment-specific absolute URLs in theme files. This link hard-codes a localhost domain, which will break on non-local installs; use a root-relative URL (or a Navigation Link block) instead.
<p class="mobile-menu-link-row"><a href="http://localhost:8882/contact/">Contact</a></p>
src/scss/animations/_mobile-menu-motion.scss:21
- This selector is currently global and will restyle the responsive overlay close button for any Navigation block on the site. Scope it to the header to avoid affecting Navigation blocks used elsewhere.
.wp-block-navigation__responsive-container-close {
…ctor scoping - Restore visible :focus-visible outline on accordion rows and links - Replace hardcoded localhost URLs with root-relative paths (Systems, Contact) - Scope close-button selectors to .site-header - Correct site logo comment wording in functions.php
Reviewed all CodeRabbit and Copilot recommendations.Applied:
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
patterns/header.php:18
- The header pattern still hard-codes a localhost image URL for the brand mark. This will break in any non-local environment, and now that the theme supports
custom-logoit should usecore/site-logoinstead so the logo is managed via the Site Editor.
<div class="wp-block-group"><!-- wp:image {"id":225,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:8882/wp-content/uploads/2026/07/image-1.png" alt="<?php echo esc_attr__( 'LightSpeed', 'ls-theme' ); ?>" class="wp-image-225"/></figure>
<!-- /wp:image -->
<!-- wp:navigation {"ref":226,"mobileMenuSlug":"mobile-menu","mobileMenuBreakpointEnabled":true,"mobileMenuBreakpoint":1024,"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} /-->
ZaredRogers
left a comment
ZaredRogers
left a comment
There was a problem hiding this comment.
Looks good @brandonmarshal
Summary
parts/mobile-menu.htmltemplate part, registered intheme.json, wired to the header'score/navigationvia Ollie Menu Designer'smobileMenuSlug(drawer breakpoint raised to 1024px so tablets get it too, not just phones).core/detailsaccordions reusing the theme's existing chevron/hover mechanism, with Systems and Contact as plain links.button-secondary/button-secondary-outlinestyles.add_theme_support('custom-logo')socore/site-logorenders in the menu's logo row.src/scss/animations/_mobile-menu-motion.scss: styles WP core's native overlay close button to match the header's icon-button treatment, aligns the logo row with it, and normalizes row height/spacing across all accordion and link rows.Test plan
Static checks:
npm run lint:json— passednpm run schema:validate— passednpm run security:scan— passednpm run build:csscompiles cleanlyVerified live on a local WordPress instance:
parse_blocks()— no invalid/freeform block content🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style