New Handbook layout

[corywatilo]

Here's an updated design for Handbook & Docs. This replaces earlier designs from #1340, with a focus on IA, simplicity, and room for large graphics to add a little flare. (This coincides with some recent aesthetic discussions that still need to be finalized, so the actual design polish is TBD.)

Handbook index

Handbook article

New way to get to Overview pages

#1681 gives us the ability to use a root subdirectory as a section's overview page, instead of /overview. This prototype shows how we can decouple the section title from the dropdown it contains. This dual-action menu lets you expand the section by clicking the caret, or simply visiting the section by clicking the section name.

The prototype also shows a hover effect around the navigation area. Nav is slightly faded by default, but hovering near the menu would show it in full strength, and show dropdowns:

The goal here is to give us a way to show the menu at all times when you have screen real estate, but remove some focus (without hiding it entirely) on smaller screens.

Custom graphics for each Handbook section

I have a placeholder graphic (the galaxy) in these mocks, but all that space above the fold could have a unique graphic per section, which could look really nice.

Custom templates for Handbook & Docs pages

Today we have some "custom" layouts within Handbook & Docs (like Team, which doesn't look like a traditional Handbook page).

I'd like to propose we create more custom layouts on an as-needed basis. Examples of pages this would be useful for:

1. Deploy index
2. Data-in index
3. Data-out index
4. Story (seen below)

Galaxy graphic is just a placeholder. We also have the chance to create some scroll interactions with the graphic. (Imagine zooming in on a planet when you scroll to a certain milestone.)

How do we get here?

Handbook is a straightforward place to start. Docs have a few extra pieces, and since we may want to do some one-off pages within Docs, it might make sense to implement this in Handbook first. (This will give us some more time to nail down more specific designs/layout options for certain Docs pages.)

There are also some speed/optimization considerations @smallbrownbike may want to take a look at. If we can really nail Handbook, we can carry over those improvements into Docs.

[corywatilo]

Let's get this built!

→ Figma mocks

Considerations as we build:

1. We're going to want to carry this layout through to the Docs section in the near future. (Should anything be abstracted to be shared between the two sections?)
2. Do we need the Ant library or is there a better option? (Asking because I think there may be performance implications?)
3. I should probably think through mobile nav menu interactions... 😬 not sure it can be 100% inferred by looking at the desktop mocks

Design notes:

• Idea for Handbook nav is it's centered vertically and fixed on screen, then likely overflows with a scrollbar if the user has a very large section expanded
• On-page nav starts lower right of screen, then stays fixed on screen once it's scrolled to the top
• Searchbar stays fixed on screen (though could punt on this if it interferes with the on-page nav
• "Next up" link should auto-populate based off the Sidebar file
• We will likely want to create a graphic for each section of the handbook (ie: Company, Strategy, etc). It would be nice to have a single place to update these, along with the ability to override to show a graphic on a specific page if we want to. (Nice to have, not important.)