Right-hand in-page table of contents on docs pages is hidden below 1450px

[vjwilson]

On current PatternFly docs, the in-page table of contents (TOC) is hidden when the browser width is below 1450px.

@media (max-width: 1450px)
.ws-toc {
    display: none;
    visibility: hidden;
}

Often, I keep my browser windows narrow, either to fit them side-by-side on a large monitor, or simply because the resolution I use on my 13-inch MacBook is 1440px wide. So, I rarely see that right-hand side table of contents.

I think this hurts discoverability, and makes it harder to get to the section I need. In general, hiding things to make responsive work is an anti-pattern. (This is the opposite of showing unnecessary things for large widths, like the classic, https://twitter.com/wilto/status/63284673723375616?lang=en )

I'd like to request an enhancement that allows that menu to be visible/toggle-able/accessible somehow at smaller widths.

Here is an example screenshot taken from my 13-inch laptop, with the window as wide as it can go, but still no right-hand TOC visible.

[evwilkin]

@vjwilson thanks for the suggestion, agreed that this could be a useful addition. We'll send this through design to determine the appearance/interaction and look to tag you for review once it's built out.

[maryshak1996]

Here are is my proposal based on a couple of iterations and conversations with the team @mcarrano : https://marvelapp.com/prototype/7bcja40

[mcarrano]

@maryshak1996 I like this, but can we make this with existing PF components? If not, what are we missing? Do we need something that is like an expandable header? Maybe something like this? https://www.patternfly.org/v4/components/expandable-section#disclosure-variation I had been thinking we would just use a standard dropdown, but I do like the look of what you propose here.

[maryshak1996]

Final designs can be found here: https://marvelapp.com/prototype/7bcja40
This design uses the disclosure variant of the expandable component with two visual customizations:

1. Disclosure background should be light grey, so that it doesn't blend in too much with the rest of the page
2. We should remove the blue vertical line on the expandable section dropdown, so that we can we can place the TOC inside of it without having a double keyline appearance

[mcarrano]

Thanks @maryshak1996 . I have opened patternfly/patternfly-org#2843 to begin implementation and will now close this out.

cc @evwilkin