Docked nav - implement responsive solution in Page layout

[nicolethoen]

Follow up to core issue patternfly/patternfly#8040

Short description of the layout is

• Page component (.pf-v6-c-page) gets .pf-m-dock.pf-m-no-sidebar to support the docked nav layout.

• There is a regular masthead that only appears on mobile. It's intended to only have a hamburger menu (to toggle docked nav open/closed), logo, and any buttons/utilities you want easily accessible on mobile. It disappears on desktop.

• On mobile, .pf-m-expanded expands the .pf-v6-c-page__dock element. The docked nav overlays the content area and takes on a "text expanded" display, where you can see text next to the docked nav stuff.

• On desktop, default display is docked. Clicking the hamburger will show the "text expanded" display, which toggles .pf-m-text-expanded on .pf-v6-c-page__dock.

  • This toggles the dock variants of nav, buttons, and menu toggles to show/hide their text. nav, buttons, and menu toggles also have a .pf-m-text-expanded class that can be applied to manually toggle that state, but it isn't used in any of the core examples currently. The only element that gets .pf-m-text-expanded is .pf-v6-c-page__dock, and the CSS handles the rest.

Task list from the core PR - patternfly/patternfly#8217

• Add page dock pf-m-expanded and pf-m-text-expanded variants

  • .pf-m-expanded will expand the docked nav variant on mobile
  • .pf-m-text-expanded will expand the docked nav on text to show text next to the buttons/menu-toggles and show a larger logo.

• Add button pf-m-dock and pf-m-text-expanded variants

  • Button has a new variation .pf-m-dock for use as any button at the top level in docked nav. Ideally it has an icon and text. The docked variant will toggle between icon-only and showing the icon+text in the docked nav, and can be manually set to show text with .pf-m-text-expanded on the button.

• Add menu toggle pf-m-dock and pf-m-text-expanded variants

  • Details are same as button

• Add support for compact masthead logo

  • The masthead logo .pf-v6-c-masthead__logo now supports .pf-m-compact. This is a compact version of the logo that's shown by default in the page dock. It's hidden and the regular logo is shown on mobile and when the dock nav is "text expanded"

• Add nav pf-m-text-expanded variant

  • This is a modifier to manually switch between text and no-text for the docked nav variant

• Just a general thing, but plain buttons now officially support text, either standalone or with an icon. It worked fine before, but wasn't documented (at least on the core side), so just make sure that's supported.

---

Jira Issue: PF-3288

[coderabbitai]

🔗 Related PRs

#12140 - feat(TreeView): add support for disabled TreeViewListItems [merged]
#12175 - feat(docked nav): add support for docked nav layout [merged]
#12282 - fix: bump pf-core version 6.5.0-prerelease.55 [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!