[DO NOT MERGE YET] Match header 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.

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: 007d305

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]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[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.