Feat: Introduce NavigationItem subcomponent and showcase Header with Navigation and Dropdown

[crishpeen]

Description

Additional context

Issue reference

[coveralls]

coverage: 96.838%. remained the same
when pulling d36c4c0 on feature/header-navigation-dropdown
into 14ebbb7 on feature/unstyled-button.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook ready!

Name	Link
🔨 Latest commit	866be97
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/6786997f46a4f900084cb0d7
😎 Deploy Preview	https://deploy-preview-1840--spirit-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	866be97
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/6786997f5699560008d51b04
😎 Deploy Preview	https://deploy-preview-1840--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[adamkudrna]

Nice!

[literat]

I think we are missing a focused state. In both cases, the opened dropdown looks unrelated to the trigger. The only state change is the arrow. I think I was expecting also some color/background change when I clicked the trigger and the dropdown opened.

And in the first example, it is maybe even worse. Because I do not know if the user icon is related to the account text and if the dropdown is related to the icon or the text. There is no clue that both are the same component.

[crishpeen]

I think we are missing a focused state. In both cases, the opened dropdown looks unrelated to the trigger. The only state change is the arrow. I think I was expecting also some color/background change when I clicked the trigger and the dropdown opened.

And in the first example, it is maybe even worse. Because I do not know if the user icon is related to the account text and if the dropdown is related to the icon or the text. There is no clue that both are the same component.

this is done as possible with current components. We do not have a design for anything else. However, if we introduce some kind of styled button for this, the change would be simple (just replace the <button class="button-unstyled" with it.