Side Nav component

[simurai]

This adds a "Side Nav" component to Primer CSS.

Basic	With different content types

Basic markup

<nav class="SideNav">
  <a class="SideNav-item" href="#url">Account</a>
  <a class="SideNav-item" href="#url" aria-current="page">Profile</a>
  <a class="SideNav-item" href="#url">Emails</a>
  <a class="SideNav-item" href="#url">Notifications</a>
</nav>

Utility and inline styles are optional and depend a bit where the component gets used. There could be modifier classes, but using utilities seems just as simple and allows for more flexibility without the maintenance cost.

Next steps

• Create component
• Add documentation
• Test on .com
• Change Sub Nav text to blue
• Cleanup
• Finalize documentation

.com tests

• COC and license picker https://github.com/github/github/pull/119242
• Enterprise navigation https://github.com/github/github/pull/118177

---

Issue: https://github.com/github/design-systems/issues/624

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[simurai]

After feedback from @zainkho + @emilybrick, here the sub nav with a white background. It's only done with bg-white in the docs example. So that the sub nav could still be used stand-alone:

Nested	Stand alone

Maybe we can start "baking" it into the component once we have 1-2 more examples that use a sub nav.

[broccolini]

here the sub nav with a white background.

@simurai Oh interesting, so is the intention to always have a white background when the section expands to show level 2 items? I can see how that might help make what is active more clear. Will be good to see in dotcom and see how it feels!

[shawnbot]

This is great. Let's ship it! 🚀