Add mobile friendly table of content

[rvsia]

On mobile phone the content is put to the end of pages and it's not very useful (especially on long screens):

This PR hides this list on smaller screen and puts a menu to the top of the page:

• fix a bug when the code editor was bigger than the viewport.

[codecov]

Codecov Report

Merging #564 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #564   +/-   ##
=======================================
  Coverage   93.73%   93.73%           
=======================================
  Files         189      189           
  Lines        2906     2906           
  Branches      952      952           
=======================================
  Hits         2724     2724           
  Misses        182      182           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b90d156...40516fd. Read the comment docs.

[Hyperkid123]

@rvsia nice
I think we need to emphasize the buttons bit. I think its easy to miss

[rvsia]

@Hyperkid123 Yeah, I am thinking the same. However, do you have any idea? icon, make it bold? It should be visible, but not so much. :D

[Hyperkid123]

Well, the next question is. Do we even need that in the mobile view? Should we just hide the whole thing?

Usually, this kind of navigation is stacked on top before the content or just hidden. I think it adds too much complexity. In our case, sometimes we have a lot of sections and the content can get pretty long. I would just hide it on mobile...

[rvsia]

I think it's a nice feature to have - especially on pages with a lot sections. Users can quickly scan the whole content to find if the page contains what they are searching for. And having it as a small button does not disrupt the look and the feel of the page.

[Hyperkid123]

All right let's try to find something that also looks good.

[rvsia]

What about? (not pushed yet)

[rvsia]

Maybe with pushing it to the right side

[Hyperkid123]

I agree it should be on the right side

[rvsia]

[Hyperkid123]

I don't exactly like that we need a special component.
We can use smart layout and reverse the column/row order on small screens. And make this a part of the normal content component.

It should work since we have a different grid item for the actual content and the content navigation.

[rvsia]

I would like to make a common layout component in the next PR and refactor all pages to use it. I could include this change in it.

import DocPage from '@docs/doc-page'

<DocPage file="bla/bla">
  ...content...
</DocPage>

instead of defining Grids and contents in every page.

[Hyperkid123]

Yep, that is exactly what should happen. Can you add a task to the docs project?

[rvsia]

Done! 🖖 you can find the task in the issues. I will start working on it right after this is merged.

[Hyperkid123]

🎉 This PR is included in version 2.5.2 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• pf3-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

Demo can be found here!