Skip to content

prototype: responsive TOC redesign (Panel vs Drawer) - #5081

Draft
lboehling wants to merge 1 commit into
patternfly:mainfrom
lboehling:prototype/responsive-toc
Draft

prototype: responsive TOC redesign (Panel vs Drawer)#5081
lboehling wants to merge 1 commit into
patternfly:mainfrom
lboehling:prototype/responsive-toc

Conversation

@lboehling

Copy link
Copy Markdown

Summary

  • WIP prototype for design/dev feedback — not intended to merge as-is.
  • Responsive TOC behaviors by breakpoint:
    • ≥1450px: existing sidebar JumpLinks
    • 992–1449px: MenuToggle in sticky tabs
    • <992px: floating MenuToggle (below tabs, or fixed on overview pages)
  • Bottom-left TOC surface switcher to compare Panel (raised + Popper) vs pill overlay Drawer (PF defaults for width/min-width; full-bleed overlay under 768px).
  • Choice persists in localStorage (ws-toc-surface).

Preview / review notes

Test plan

  • Component page with tabs (e.g. Accordion): Lg toggle in tabs; Md floating toggle; XL+ sidebar unchanged
  • Overview / no-tabs page: fixed toggle placement vs Give feedback; no horizontal jump on scroll
  • Drawer surface: opens with PF default width; md inset top/bottom/end; <768px full page-main overlay
  • Drawer closed: no blank gutter; sticky tabs still stick
  • Panel surface still works as before
  • Surface choice survives reload

Made with Cursor

WIP prototype for design feedback — not production-ready. Adds breakpoint
TOC modes, sticky/floating toggles, and a Panel|Drawer surface switcher.

Co-authored-by: Cursor <cursoragent@cursor.com>
@lboehling

Copy link
Copy Markdown
Author

added another prototype vid of panel vs drawer in the figma file since i'm having a hard time troubleshooting the pre preview build failure.

https://www.figma.com/design/Q6aimf2M8cfoA3C7aOnlgD/pf.org---Responsive-TOC-redesign?node-id=196-521&t=YVGqIH88HIEXZgJ7-4

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