feat: add docked nav - #8020
feat: add docked nav#8020
Conversation
|
Preview: https://pf-pr-8020.surge.sh A11y report: https://pf-pr-8020-a11y.surge.sh |
|
Do we want to call the new |
|
I'm assuming this isn't hardened yet - there are some potential problems at narrow widths |
|
I don't love having two things that are "header." |
| background-image: var(--#{$compass}--BackgroundImage); | ||
| background-size: cover; | ||
|
|
||
| &.pf-m-max-canvas { |
There was a problem hiding this comment.
Is "max" a new concept in our modifiers? Can we reuse something like "fill" or "full" (though those usually refer to itself, not its children)? Also, "canvas" isn't used anywhere else - the "main" grid area is what it's maximizing?
There was a problem hiding this comment.
That was just something temporary - updated to .pf-m-docked
|
|
||
| // - Masthead | ||
| .#{$masthead} { | ||
| &.pf-m-docked { |
There was a problem hiding this comment.
Is this supposed to be a real part of masthead? If so, there should be an example and docs in the .md file.
Second thing here, I really don't like .pf-m-docked as the name changing the orientation
There was a problem hiding this comment.
Added docs and an example.
On the name, pf-m-vertical would be fine, but my thinking is this for the docked nav specifically and this lets us be opinionated for use as a dock that wouldn't necessarily apply to a vertical masthead with regular stuff int (the children being center aligned, for example). But it doesn't matter to me, let me know if you want to change it.
There was a problem hiding this comment.
🤷🏻♀️ Could also be 2 modifiers - vertical and docked. But I'm not going to fight you on this 😄
| grid-template-columns: var(--#{$page}__sidebar--Width) 1fr; | ||
| } | ||
|
|
||
| &.pf-m-docked { |
There was a problem hiding this comment.
Since it's not the page that is docked, it seems like this should be named something like .pf-m-has-dock (it has something docked, not is docked) or pf-m-side-masthead/.pf-m-vertical-masthead/.pf-whatever-layout (because it's a different page layout option).
I think I'd rather see something about the layout rather than has-dock because I don't think dock necessarily implies a left side vertical dock.
There was a problem hiding this comment.
Updated to .pf-m-dock to indicate it has a dock, not that the page is docked.
| {{/nav}} | ||
| ``` | ||
|
|
||
| ### Docked nav |
There was a problem hiding this comment.
FWIW, this doesn't show the selection decorator in the full page view since it's a negative margin.
There was a problem hiding this comment.
Yah... I wasn't sure about that. We could add a margin the example CSS. Probably good idea since our visual regression tests only test the full-page examples. WDYT?
| ``` No newline at end of file | ||
| ``` | ||
|
|
||
| ### Docked |
There was a problem hiding this comment.
On narrow screens, the "make your screen wider" box isn't centered anymore if you care.
Also, if the screen is too short to fit all the nav items, there's no scroll.
There was a problem hiding this comment.
Ah, I'll fix the responsive box if it isn't too complicated. And on the scroll, this is just being used for POC/vibe stuff so we can handle that part later.
|
|
||
| // - Masthead | ||
| .#{$masthead} { | ||
| &.pf-m-docked { |
There was a problem hiding this comment.
🤷🏻♀️ Could also be 2 modifiers - vertical and docked. But I'm not going to fight you on this 😄
🥊🤖 We could, but IMO it isn't necessary. If we end up switching orientation to horizontal but want to keep all the other alignment and stuff that comes with docked, that could be called horizontal or top/bottom or whatever, and the default is vertical. Like most of our components - if we have a variant that just changes orientation (or some other style), the variant for the change is what gets the class (action-list & action-list.pf-m-vertical, nav & nav.pf-m-horizontal, tabs & tabs.pf-m-vertical, etc). |
|
If there are too many items in the dock to fit, nothing scrolls to get to them. You can tab to them but not get there with the mouse. |
| ```hbs isBeta | ||
| {{#> compass compass--HasDock=true}} | ||
| {{#> compass-dock}} | ||
| {{#> compass-dock-content}} |
There was a problem hiding this comment.
Does this div exist? I don't see it in the surge or css.
|
Just one more check - on https://pf-pr-8020.surge.sh/components/page/html/with-dock/ is this correct or not to be worried about - logo shifts over, and the main section touches the right/bottom side of the viewport but not top/left. Otherwise 👍🏻 2025-12-12_11-05-44.mp4 |
|
🎉 This PR is included in version 6.5.0-prerelease.32 🎉 The release is available on: Your semantic-release bot 📦🚀 |
5 participants
fixes #7183
Links:
.pf-v6-theme-glassto the<html>element to enable glassAdds these things:
.pf-m-dockedto the compass component for the docked + big content layout.pf-v6-c-compass__dock,.pf-v6-c-compass__dock-logo,.pf-v6-c-compass__dock-main, and.pf-v6-c-compass__dock-toolsfor the dock contents..pf-m-dockedto the masthead component that basically just turns it into a vertical layout, and changes it to a flex layout so we can easily add dividers between the sections. For use with regular pf layouts..pf-m-dockedto the nav component that hides the nav link text and turns it into a vertical layout.pf-m-docked-navto the page component that modifies the grid for the docked layout.pf-m-verticalto the toolbar component for a vertical layoutTODO: