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

  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[bot]]

⚠️ No Changeset found

Latest commit: 007d305851660c53954768c7db83ba2929a2a3b1

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[bot]]

🟢 No design token changes found

[github-actions[bot]]

🟢 No visual differences found

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

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