feat: #3620717 Add offcanvas mobile navigation to the header and remove the Varbase branding from the footer

Issue: https://www.drupal.org/i/3620717

Adds offcanvas mobile navigation to the header page region and removes the Varbase and Vardot branding from the footer page region.

Prerequisite

Depends on https://www.drupal.org/i/3620712 and should not be merged before it. The header sets icon_color on the Icon Toggle component, and the recipe's shipped component config does not declare that prop yet, so without that re-export the config import rejects the value and the site install aborts. Verified both ways: with the current component configs the install exits 1 on 'icon_color' is not a prop on this version of the Component; with the re-export in place the same two regions import and the install exits 0.

Header, 6 entries to 12

Adds offcanvas-menu for mobile navigation, with the main menu in its menu slot, the footer menu in its utility slot and the search exposed filter in its search slot; plus a Newsletter button, a group and a second main-menu placement.

No theme change is needed. offcanvas-menu already exists as a complete SDC in the canonical theme, and its pinned component_version: b15fbf5fea2cb26b matches the active version generated on install. Seven of the nine pinned versions across these two regions match the installed active version exactly; the two that did not were icon-toggle and button, and the re-export in #3620712 is what reconciles them.

Footer, 8 entries to 9

This is a deliberate de-branding of a Vardot-authored template, so it is worth stating plainly rather than leaving in the diff. The footer currently renders, and this MR removes:

• logo.svg with alt="Varbase logo"
• a "Powered by Vardot" block with vardot-logo.svg
• a tagline linking to vardot.com: "Enjoy the free software, or get a quote for enterprise support and fully functional websites."

Replaced by the theme's own wordmark and ©2026, The Right Up. All Rights Reserved., on a dark treatment.

Two things to review deliberately

The footer drops menu.secondary. That is a behaviour change and it needs the maintainer's confirmation that it is intended. It came from the source these regions were exported from, so it is not an accident of the export, but it is not something this MR can decide.

The header section stays light, on purpose. The design these regions come from uses a dark header, and the footer here does go dark. The header cannot yet: it places system_branding_block, and the theme resolves that block's logo unconditionally to the black-ink rightup-logo.svg (hook_preprocess_block()), while the white variant is exposed only to page templates in hook_preprocess_page(). A dark header would therefore render a black wordmark on black, confirmed by computed style: img.brand-logo-image was rightup-logo.svg against an effective background of rgb(0, 0, 0). Filed as https://www.drupal.org/i/3620716; once it lands the header section can take the dark background. For the same reason the search toggle uses icon_color: text-body, the component's own default, rather than text-white on a light bar.

Verification

Built on drupal/varbase_project:11.0.x-dev, Drupal 11.4.6, installed through both drush site:install and the browser site-template picker.

• Install exit 0; header 12 entries and footer 9 entries present in the installed config.
• Measured by computed style after install: header wordmark black ink on rgb(255, 255, 255), footer wordmark white on rgb(0, 0, 0), both visible; search icon rgb(33, 37, 41).
• Offcanvas toggle renders as a button labelled "Open menu" bound to its panel.
• vardot-logo and alt="Varbase logo" are both absent from the rendered front page.
• Baseline held: default theme vartheme_bs5_rightup, 12 blog + 2 page nodes, 5 Canvas pages, 59 media, 0 error-severity watchdog rows, 0 console errors, all Canvas and article pages 200.

AI-Generated: Yes

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Developer Documentation
• User Guide Documentation
• Reviewed by human
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release