Update navigation

[josepmartins]

Fixes https://github.com/github/primer/issues/2426

👓 : https://primer-6f994bf089-26493675.drafts.github.io/

• Remove monospace font (SFMono?)
• Remove dark background and update link colors (this is in preparation for color mode support)
• Use UnderlineNav for top right links to provide the correct styling + selected states (example)
• Remove "View components" and "React components" from top
• Add "Brand" link in the top navigation
• Add "About us" link (if it wasn't already added from https://github.com/github/primer/issues/2425)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5170f84

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/gatsby-theme-doctocat	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mperrotti]

I used the Canary release to test this locally in primer/design and everything looked as I'd expect. 👍

[mperrotti]

@emilybrick - are we really ready to remove these? I think there are still some React-specific and Rails-specific pages in those sections. Maybe this isn't actually an issue though...when I tested with a local build of primer/design, they were still there because they were still defined in primer/design's primer-nav.yml

(non-blocking feedback)

[mperrotti]

It's a little strange that there's no navigation item for the "main" docs. How do I get back to primer.style/design if I navigate to Brand?

[josepmartins]

That's a good point 🤔 . I guess we shouldn't release this changes until this is done? https://github.com/github/primer/issues/2428? @emilybrick

EDIT: Just learned that primer.style redirects to https://primer.style/design, so the github logo and the Primer design system title in the top navigation would always bring you back to primer.style/design

[mperrotti]

I think it's ok to release without the homepage redesign. It just felt strange that the "main" Primer docs don't have their own item in the UnderlineNav.

[emilybrick]

Hey chiming in -

As mentioned the Primer Design System link is the link to the root URL (primer.style, + primer.style/design which will eventually just be primer.style)

[mperrotti]

I'm ok with this if everybody else is

[mperrotti]

item.url === path may return false if item.url is something like "https://primer.style/brand", and path is something like "/brand".

I'm not sure if this is actually an issue, but it's something to be aware of when we deploy to prod.

[josepmartins]

You're right. Should we go with something like this instead?

selected = {item.url === siteMetadata.header.url + path }

[mperrotti]

Let's try it! Maybe we can test this by opening a draft PR in primer/design so we can test a preview deployment?

[josepmartins]

preview deployments generate unique domains like https://primer-6f994bf089-26493675.drafts.github.io/ so I don't think using the header.url will work 😱 . I think there's only one way to know 🚢 🤣

[mperrotti]

Ok, let's do it 🤞