Match chrome (header and sidebar nav) to new docs

[mperrotti]

Closes https://github.com/github/primer/issues/4166

We should wait until the new docs site is launched before merging this. Update 02 Dec 2024: soft launch is happening sometime this week - likely Tuesday 03 Dec 2024.

Summary

Updates the design of the docs site navigation to match the new Primer docs site (https://github.com/github/primer-docs) to give a more "seamless" feel when navigating between the different sub-sites.

We chose not to make these changes in doctocat to avoid accidentally breaking things downstream.

List of notable changes:

• Header navigation has a new layout
• Search input moved to the sidebar and functions like the search input in the new Primer docs.

What should reviewers focus on?

Confirm that this matches the design of the new Primer docs site.

Steps to test:

1. Run the docs site
2. Look at the navigation at various viewports

Supporting resources (related issues, external links, etc):

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Child pages

Before	After

Landing page

Before	After

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5761af1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

🟢 No design token changes found

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[emilybrick]

Hey there! This looks awesome! Leaving some feedback from the deployment link.

I believe this should be Primer / Brand UI, since that's the page the user is currently on, and Brand UI should not be listed to the right with the other links.

Is it possible to update the side nav in this PR to match new docs as well? Main things missing is Mona Sans. If the section headers aren't clickable, I think they're fine left in gray/muted color.

[emilybrick]

This looks awesome! Thank you so much 🙌

[emilybrick]

This looks great! I'm sorry, I mentioned in Slack but I should have put it here -

can we match the max-width of the brand page to the proiduct UI page, and add margin: 0 auto? Right now, on wide screens, they are different widths.

The max-width of the product UI page is actually being calculated based on the cards below (each card component has a max width built in), but I think it ends up around...1340px max-width. I tested this in the inspector and that appears to be the right size.

[rezrah]

Can we make this link to Primer Brand docs? Our users rarely need to go to the homepage or product docs so it feels intuitive to send them to the root. Ideally it would work like our marketing pages, where clicking on the title text takes you back to Primer Brand UI homepage and clicking the Logo icon will take you back to primer.style. What do you think?

Screen.Recording.2024-12-03.at.09.54.17.mov

[mperrotti]

I think we want to keep this as a link to root. One of the main purposes of the docs redesign is to make all of the Primer docs feel like they live in one big site.

[rezrah]

Is this something you'll be looking at straight after @mperrotti or shall we take this on in Brand? This workaround feels quite broken with the double scroll bars and centering.

Screen.Recording.2024-12-03.at.10.09.22.mov

[mperrotti]

Double scrollbars should definitely be fixed. I can't think of a way around centering except:

• Upgrade to a newer version of @primer/react
• Attempt to use the sx prop to fake a side sheet

I'll try using the sx prop to manually style this like a side sheet.

[mperrotti]

I ended up achieving this with the sx prop