Skip to content

Conversation

@spadilha
Copy link
Contributor

This pull request refactors the navigation system's styling architecture to use a centralized coordinator pattern, consolidating all first-level navigation styles and toggle button styles into the navigation-wrapper block. Individual navigation blocks now only handle their own content-specific styles, which reduces code duplication and makes maintenance easier. Documentation has been updated to reflect the new architecture, and redundant or duplicated CSS has been removed from individual block styles.

Note

Architecture Decision Point: This PR consolidates all shared navigation styles into the Navigation Wrapper block since it acts as the parent container for all navigation types. I'd like the team's input on whether this centralized approach is optimal, or if these shared styles should be moved to global theme styles. The current approach keeps navigation-specific styles within the navigation block system, but I'm open to feedback on the best architectural pattern for shared component styling.

CSS Refactoring: Centralized Styles

  • Moved all first-level navigation and toggle button styles (including chevrons, padding, hover/active states, and animated underlines) to navigation-wrapper/style.pcss, making it the single source of truth for navigation styling. Utility and primary menu overrides are also handled here.

Block-Specific CSS Simplification

  • Removed duplicated toggle button and first-level navigation styles from mega-menu-item/style.pcss and standard-menu-item/style.pcss, leaving only dropdown container, layout, and submenu wrapper styles in those files.
  • Updated navigation-link/style.pcss to provide only base link styling (underline, transitions, focus states), with context-specific enhancements now handled by the Navigation Wrapper.

Editor CSS Adjustments

  • Added utility and navigation menu display overrides to standard-menu-item/editor.pcss for improved editor preview consistency.

Navigation System Architecture & Documentation

  • Updated docs/navigation-blocks.md to describe a centralized styling coordinator pattern, where Navigation Wrapper manages all first-level navigation and toggle button styles, and individual blocks (Mega Menu Item, Standard Menu Item, Navigation Link) handle only content-specific styling. This includes new sections on CSS architecture, file organization, and development guidelines.

Overall, these changes make navigation styling more maintainable, consistent, and easier to update, with a clear separation of responsibilities between the centralized coordinator and individual content blocks.

QA

Links to relevant issues

@spadilha spadilha self-assigned this Oct 20, 2025
Copy link
Collaborator

@dpellenwood dpellenwood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Thank you for the excellent documentation updates, too! I'd like @Vinsanity to review before this merges, too.

@spadilha spadilha changed the title Feature/moose 156/consolidade navigation block styles [MOOSE-156] Consolidade navigation block styles Oct 22, 2025
@spadilha spadilha marked this pull request as ready for review October 22, 2025 21:57
Copy link
Contributor

@Vinsanity Vinsanity left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense to me! nice work @spadilha . and thanks for all the comments around use cases/implementation. Very helpful 🌮 🟢

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.

5 participants