[PLAY-121] Add Sidenav to the Visual Guidelines Page

[augustomallmann]

Screens

Breaking Changes

No breaking changed. Added a sidebar to the visual_guidelines route. When the user clicks on any link, he's dragged to the section corresponding to the ID.

Runway Ticket URL

PLAY-121

How to test this

[INSERT TESTING DETAILS]

Checklist:

• LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
• DEPLOY Please add the Milano label when you are ready for a review.
• SCREENSHOT Please add a screen shot or two.
• SPECS Please cover your changes with specs.
• READ DOCS Please make sure you have read and understand the Playbook Release Process

[jasperfurniss]

@augustomallmann
A few of the links are broken: Display, Cursor, and FlexBox. https://pr1972.playbook.beta.hq.powerapp.cloud/visual_guidelines#shadows

Also, can you make the footer not visible, until you actually scroll all the way to the bottom.
It may require you to give the left sidebar a specific height of some type.
But it just looks funny on my screen at the moment because half of the footer is always showing when you are click the items.

[augustomallmann]

Also, can you make the footer not visible, until you actually scroll all the way to the bottom.
It may require you to give the left sidebar a specific height of some type.
But it just looks funny on my screen at the moment because half of the footer is always showing when you are click the items.

Hey @jasperfurniss. Thanks for the great feedback!

• I fixed the links
• About the footer, it happens because the if you scroll with your cursor on the sidebar it drags you straight to the footer. The pb--page--content--main is a div that already has scroll. My suggestion is to add the footer inside the pb--page--content--main div, making it appears only after the user reads all the content, but it won't be full width. What do you think ? I pushed this example so you can check it in the milano server