Docked nav - responsive solution in Page layout

[nicolethoen]

The docked nav should collapse into a toggle icon and be rendered as a horizontal masthead at mobile viewport widths (like our existing masthead does in traditional page layouts).

When the toggle is expanded, the docked nav with visible text labels should overlay the page content.

Figma: https://www.figma.com/proto/VNRVzyQl8urs3HFi5RXn0G/Unified-design-system-Concepts?page-id=4042%3A17137&node-id=5713-16691&viewport=2661%2C-8471%2C0.57&t=zjYcDsliqXPpqfps-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=5713%3A16691&show-proto-sidebar=1

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• Docked nav responsive behavior #8027

Related Issues

• Docked nav - responsive solution in Compass layout #8042
• Ability to hide/show actions responsively based on browser height #8031
• Left navigation - Unified theming updates #8014

🔗 Related PRs

#8029 - fix: fixes for react docked nav [merged]

👤 Suggested Assignees

• mcoker
• nicolethoen
• andrew-ronaldson

---

🧪 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!