Skip to content

feat(header): add WordPress-style header navigation modules - #633

Open
queball1999 wants to merge 7 commits into
CoreBunch:mainfrom
queball1999:feat/header-navigation-menu
Open

queball1999 wants to merge 7 commits into
CoreBunch:mainfrom
queball1999:feat/header-navigation-menu

Conversation

@queball1999

Copy link
Copy Markdown

Summary

Adds a header navigation menu: two new base modules, plus the engine and editor pieces they need.

What changed

  • base.nav (Header Navigation): A nav bar that collapses below an author-chosen width into a dropdown or a full-screen overlay, behind a pickable toggle icon. Props: collapse width (presets or any number), collapsed style, menu icon and icon colour, menu alignment, menu background.
  • base.nav-item (Menu Item): A menu entry that nests to any depth, so the page tree is the menu structure. With Enable link off, the label is a static element; on an item with a submenu, the label itself toggles the submenu.
  • instanceCss on render() output: CSS that depends on an instance's props, deduplicated by content. base.nav uses it for the media query at its collapse width.
  • canvasCss on ModuleDefinition: A stylesheet for a trusted module's editor component, injected where the publisher puts module CSS (after the reset and framework CSS, before class and user CSS).
  • canvasViewportWidth on ModuleComponentProps: The pixel width of the breakpoint frame a component renders in.
  • Property controls: A number control can offer presets; a select whose options carry iconSvg renders as an icon button row.

Fixes to shared editor controls, found while building the menu

  • URL fields could only be pasted into. Typing snapped back on every keystroke, because only complete valid URLs were stored and the field always showed the stored value. The field now keeps what is being typed and stores it once valid.
  • URL fields rejected links the publisher emits. They now accept site-relative links (/about, #pricing, ?page=2, ./a, ../a) and tel: / sms:.
  • The data-binding button covered the switch thumb on every toggle control. It now sits to the left of the switch.

Why

There was no way to build a responsive site menu without hand-writing the markup, CSS and script. The engine additions exist because the menu needs three things the module contract did not have: CSS that varies per instance, a canvas preview that follows the same cascade as the published page, and knowledge of the frame width in the canvas.

Impact

  • Users: two new modules under "Navigation". URL fields in Button, Link and Menu Item can be typed into and accept relative, tel: and sms: links. The bind-to-data button no longer overlaps toggles.
  • Developers: instanceCss, canvasCss, canvasViewportWidth, number presets and select iconSvg are available to first-party modules. presets and iconSvg are also exposed through the plugin SDK control builders. Plugin modules cannot return instanceCss or declare canvasCss.
  • Published output: nav classes are all prefixed instatic-nav. Menu panels fall back to the Canvas system colour when no menu background is set.
  • No database or migration changes.

Verification

  • bun run build
  • bun test locally on Windows: 7096 passed, 48 failed. No failures are in tests this PR adds or changes; they are scan timeouts and Windows-only path and symlink failures. Relying on CI for the full pass.
  • bun run lint
  • Docker/deployment check, if relevant. Not relevant here: no Dockerfile or compose changes.

Checklist

  • Tests cover behavior changes.
  • Docs were updated when behavior, config, deployment, or public surfaces changed.
  • No compatibility shim was added for old pre-release behavior.
  • No secrets, local databases, uploads, or generated artifacts are included.

…tion modules

- Add base.nav, a nav bar that collapses to a dropdown or overlay below a chosen width
- Add base.nav-item, a menu entry that nests to build submenus
- Let a menu item be a link or a static label that toggles its submenu
- Add the module contract fields they rely on: instanceCss, canvasCss, canvasViewportWidth, number presets and select icons
- Header navigation: this is the core feature, and every later commit on the branch builds on it
- Collect instanceCss from render() and deduplicate it by content
- Header navigation: lets the nav publish the media query at its own collapse width, so a published menu actually collapses
- Show presets as one-click buttons under a number field
- Render a select whose options carry an icon as an icon button row
- Sanitize the icon markup, since a plugin schema can supply it
- Expose both options through the plugin SDK control builders
- Header navigation: gives the nav its "Collapse below" width presets and its "Menu icon" picker
- Pass the breakpoint frame width to module editor components
- Inject a module's canvasCss where the publisher puts module CSS
- Author classes now override module styles in the canvas the same way they do when published
- Header navigation: the menu collapses in narrow frames and keeps its padding and indents in the editor
- Keep what is being typed instead of snapping back on every keystroke
- Accept /paths, #fragments and ?queries
- Accept tel: and sms:, which the publisher already allows
- Header navigation: a Menu Item's Link field could not be typed into or point at a page section
- Place the button to the left of the switch on toggle controls
- It sat on top of the switch thumb on hover
- Header navigation: found on the Menu Item's "Enable link" toggle, which the button was covering
- Add a guide to building a menu with base.nav and base.nav-item
- Document instanceCss, canvasCss and canvasViewportWidth
- Document number presets, select icons and the URL field rules
- Header navigation: the docs for the feature and for each piece added to support it

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant