feat(navbar): various navbar spacing tweaks

[andipaetzold]

Purpose of PR

This PR makes the navbar more consistent, also changes the spacing/sizes to be closer to the designs.

General:

• All navbars have a height of 60px now

Regular navbar

• All items have a total height of 28px. (Avatar has 24px, but will have 28px with the planned border)
• Fixed padding-right for icon-items with menus
• Icon buttons are closer together in the designs. But wit the 44px click size, we can't bring them any closer
• Icon buttons are square now

Loading

• Increased skeleton text height

Mobile menu button:

• Reduced height to 36px
• Reduced horizontal padding

It's best to check chromatic for the detailed changes

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[changeset-bot]

⚠️ No Changeset found

Latest commit: d2d4b12

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.

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

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-avatar", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-image", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-header", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Aug 30, 2024 2:58pm

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	516.97 KB (+277.93% 🔺)	10.4 s (+277.93% 🔺)	1.6 s (+172.63% 🔺)	11.9 s
Module	512.59 KB (+285.34% 🔺)	10.3 s (+285.34% 🔺)	2.1 s (+192.09% 🔺)	12.3 s

[andipaetzold]

I updated the PR.

• The skeleton radius of the switcher is now reduced to 4px. The radius is intentionally different from the non-skeleton element. The skeleton represents the text. It's different to the buttons and hover states.
• The skeleton switcher is not focussable anymore
• The skeleton switcher should not be wrapped with Navbar.Switcher anymore. Just use SwitcherSkeleton directly.

cc @cf-remylenoir

[cf-remylenoir]

Thank you for taking care of this 👍