feat(docked nav): add support for docked nav layout

[kmcfaul]

What: Closes #11146, #12149

Compass Demo: https://pf-react-pr-12175.surge.sh/ai/generative-uis/compass/react/docked-nav-demo/ Page Demo: https://pf-react-pr-12175.surge.sh/components/page/react-demos/docked-nav/

Summary by CodeRabbit

• New Features

  • Docked navigation support added across Compass, Masthead, Nav, and Page components.
  • Toolbar gains a beta vertical orientation option.
  • NavItem now forwards refs to allow parent access.

• Documentation

  • Added docked navigation examples and demos with assets and usage samples.

• Tests

  • New tests covering docked variants and masthead docking behavior.

• Chores

  • PatternFly dependency updated to 6.5.0-prerelease.33.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

Walkthrough

Adds docked-navigation support across multiple UI components (Compass, Nav, Masthead, Page, Toolbar), refactors NavItem to forward refs, updates demos/examples and CSS for docked layouts, adds tests, and bumps @patternfly/patternfly to 6.5.0-prerelease.33.

Changes

Cohort / File(s)	Summary
Dependency updates \packages/react-core/package.json``, \packages/react-docs/package.json``, \packages/react-icons/package.json``, \packages/react-styles/package.json``, \packages/react-tokens/package.json``	Bumped @patternfly/patternfly from 6.5.0-prerelease.27 to 6.5.0-prerelease.33.
Compass component & tests \packages/react-core/src/components/Compass/Compass.tsx``, \packages/react-core/src/components/Compass/tests/Compass.test.tsx``	Added dock?: React.ReactNode, conditional layout rendering, applies dock modifier class when dock present; tests for dock modifier presence/absence.
Compass examples & styles \packages/react-core/src/components/Compass/examples/Compass.md``, \packages/react-core/src/components/Compass/examples/CompassDockLayout.tsx``, \packages/react-core/src/components/Compass/examples/compass.css``, \packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx``	New docked-nav docs/examples and CSS for docked visualization; added CompassBasic/CompassDockDemo examples.
Masthead variant & tests \packages/react-core/src/components/Masthead/Masthead.tsx``, \packages/react-core/src/components/Masthead/tests/Masthead.test.tsx``	Added `variant?: 'default'
Nav variant & tests \packages/react-core/src/components/Nav/Nav.tsx``, \packages/react-core/src/components/Nav/tests/Nav.test.tsx``	Extended NavProps.variant to include 'docked' and apply docked modifier class; test added.
NavItem ref forwarding \packages/react-core/src/components/Nav/NavItem.tsx``	Refactored into NavItemBase + forwardRef wrapper; added anchorRef and innerRef props; updated ref handling and typings.
Page variant & tests \packages/react-core/src/components/Page/Page.tsx``, \packages/react-core/src/components/Page/tests/Page.test.tsx``	Added `variant?: 'default'
Toolbar vertical prop & tests \packages/react-core/src/components/Toolbar/Toolbar.tsx``, \packages/react-core/src/components/Toolbar/tests/Toolbar.test.tsx``	Added isVertical?: boolean (beta) prop, applies vertical modifier class; tests updated/added.
Page docs & demo \packages/react-core/src/demos/Page.md``, \packages/react-core/src/demos/examples/Page/PageDockedNav.tsx``	Added "Docked nav" docs and new PageDockedNav demo component showcasing a docked layout with vertical toolbar, nav, avatar dropdown, and gallery.
Integration test update \packages/react-integration/cypress/integration/drawer.spec.ts``	Adjusted expected CSS flex-basis value in panel width assertion.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Pay extra attention to:
  • packages/react-core/src/components/Nav/NavItem.tsx: forwardRef typing, innerRef vs anchorRef behavior, and consumer ref access.
  • Consistency of modifier keys (docked/dock) across Masthead, Nav, Page, Compass, Toolbar vs style module keys.
  • Compass.tsx conditional rendering: ensure inert attributes and drawer logic behave when regions are omitted.
  • New demos/examples and CSS: compile-time imports and tooltip/dropdown ref targets.
  • Tests: verify they use style module class names (not hardcoded strings).

Poem

🐰 I hop beside the dock so neat,
Icons snug in rows, a tiny seat,
Masthead, Nav, and Page align,
Refs forwarded on a tidy line,
Docked and vertical — carrots for the fleet! 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main feature being added: support for docked navigation layout across multiple components.
Linked Issues check	✅ Passed	The PR successfully implements docked nav variant support for Nav, Page, Compass, and Masthead components with variant props and styling, aligning with issue #11146 requirements.
Out of Scope Changes check	✅ Passed	All changes are within scope: component variant implementations, tests, demos, and dependency updates all support the docked nav feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[patternfly-build]

Preview: https://pf-react-pr-12175.surge.sh

A11y report: https://pf-react-pr-12175-a11y.surge.sh