Redesign documentation topbar and sidebar

[annamehr]

Main todos

• [ ] Navigation bar
• [ ] Left sidebar

Navigation bar

@hieronx already started a PR for the new topbar https://github.com/centrifuge/documentation/pull/472/commits

Open TODO: how to organize content by the new additional layer of navigation. Maybe use frontmatter.categories?

Left side

Centrifuge Docs

• Getting started (Getting started + Learn)
• User documentation (Use)
• Developer documentation (Build)

Right side

• Github external link (https://github.com/centrifuge)

Left sidebar

• Combine Getting started and Learn section to Getting started
• Rename Use to User documentation (old: Use section)
• Rename Build to Developer documentation

[annamehr]

@sophialittlejohn what is missing for this PR that still needs Jeroen's input?

[sophialittlejohn]

Moved back to speccing until design is finalized

[annamehr]

@sophialittlejohn moved it back to ready for development since final design has been signed off.

[annamehr]

Feedback from Tim:

• Anchor link issues -> Might be a bug but the anchor links don't always seem to work properly. When on the first item in the page it sometimes highlights the second item. (-> Not every page has this issue but for e.g.: Centrifuge at a glance, introduction to pools, built on centrifuge chain,..)
• Main container width ->I would reduce the size of the main container. At the moment the body copy has a max width of 740px (I think) which is fine but we should reduce the size of the main container to 960px (this way the anchor links are closer to the main content and doesn't float in the top right part of the screen. The disconnect is too much.. What I would do is just have this max width and fill the space to the right with a white background if the screen size gets bigger.. https://docs.stripe.com/treasury -> this is a good example. The only change to our design is that we keep the left space between nav and content to 80px.
• The bottom margin of the page title is indeed a bit too much (in design it's 16px but this might too small in implementation) you can also try 24, 32px. It just needs to be bit tighter.