Style sidebar

[BrittanyIRL]

Sidebar Style Update

Zeplin Link

Summary

• Move to styled components, hopefully clearer structure of hierarchy within side nav
• Update Link to NavLink to use activeClass in updated react router, also using exact so that the active class can work for intro sections as well for consistency.
• Some refactor for updated react structures - buhhhhbye Fragment

Notes

• I made some guesses a little on wordwrap, right side spacing, and the level 4 nested list items (see Documentation -> Common Props -> Props -> ) if someone wants to double check that it's ok
• Also made some guesses about what the "No Results" view should look like (see screenshot)

Known To Dos

• Update colors in theme so they aren't hard coded in styled-components
• Update spacing in theme to avoid setting by component
• Revisit the html elements used in the sidebar to better suite the html outline of the page for seo purposes (I didn't want to restructure too much at once)
• Something weird is happening with the hierarchy of the sidenav for some search options, see the last screenshot. When you dig thought the docs by interacting (instead of searching) you get this 'Props' section, whereas when you search, you don't get 'Props'. This makes the spacing wonky and less than ideal. Was going to handle this separate unless someone notices a quick way to solve this.

Screenshots

Basic Side Nav

No Results

Weird hierarchy on search that doesn't happen in digging through nav (see known issues)

[boygirl]

Hey! I relalized there are a couple things about this sidebar that didn't get adequately captured in the requirements. Let me look at my notes from chatting with Stefan.

[boygirl]

Because the top nav goes away on mobile sizes, the sidebar hierarchy should be:

Getting Started
- About Victory (link to the about page)
- Quick Start Guide (existing gettting started)
- Victory Native
- FAQs
- Support (spectrum link)
- Github
Gallery
Guides
  - List of Guides
Documentatin
  - existing docs hierarchy

On desktop sizes, fewer items exist in the sidebar because they are in the top nav, so the hierarchy will look like this:

Getting Started
- Quick Start Guide (existing gettting started)
- Victory Native
- FAQs

Guides
  - List of Guides
Documentation
  - existing docs hierarchy

[BrittanyIRL]

Because the top nav goes away on mobile sizes, the sidebar hierarchy should be:

Getting Started
- About Victory (link to the about page)
- Quick Start Guide (existing gettting started)
- Victory Native
- FAQs
- Support (spectrum link)
- Github
Gallery
Guides
  - List of Guides
Documentatin
  - existing docs hierarchy

On desktop sizes, fewer items exist in the sidebar because they are in the top nav, so the hierarchy will look like this:

Getting Started
- Quick Start Guide (existing gettting started)
- Victory Native
- FAQs

Guides
  - List of Guides
Documentation
  - existing docs hierarchy

I thought that handling that update with this task would be nice to separate? https://www.notion.so/formidable/Victory-Docs-re-write-2956bdca5c9e4994b8e1a12e5b7add17?p=8e4500452cd94a5f9d7f6a846e56efe6

[boygirl]

@BrittanyIRL This is looking really good to me. The one thing that looks strange to my eye is:

Since these all have "Props" and no other headings at that level, I think it might look nicer to drop "Props" and bump everything else up a level. But I'm also happy to ticket that out and wait for feedback from Joe

[BrittanyIRL]

Since these all have "Props" and no other headings at that level, I think it might look nicer to drop "Props" and bump everything else up a level.

That would also solve the weird nesting indents on search. I'll figure out how to ditch that.

[BrittanyIRL]

Since these all have "Props" and no other headings at that level, I think it might look nicer to drop "Props" and bump everything else up a level.

That would also solve the weird nesting indents on search. I'll figure out how to ditch that.

alrighty - this bumped up the PR size quite a bit, but I gutted the Props section of the documents so that the second heading on every doc section that only had Props is one less deep. I think this works well and we lose nothing important.

[boygirl]

Approved! Thanks @BrittanyIRL