Create Navbar Component

[bmuenzenmeyer]

Create a Navbar component using the new figma design (direct link).

This component starts the responsive header for the new site.

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide
🌐 This story requires some internationalization support. Slow down!

• Create a new directory called Navbar within the sections directory that contains all the new code.
• Omit search fpr now, that is the scope of another story not yet started.
• Use the new NavItem component introduced within Create NavItem component #5972
• Use the new ThemeToggle component introduced within feat(themeToggle): introduce #6007
• Use the new LanguageDropdown component introduced within Component/language drop down #5982
• Use the new social-github.svg along with AccessibleIcon to link to https://github.com/nodejs/node
• The figma puts the mobile breakpoint at 375px. Explore if we can use that directly or an new/existing tailwind token (if any)
• The links must be internationalized.
  • Add the following new keys to the i18n/locales/en.json file.
    • components.headers.links.learn
  • Use the existing `components.headers.links.[about,docs,download,blog,certification] keys
• FormattedMessage from react-intl should be used to reference the keys. Look for examples elsewhere in the codebase.

Storybook

Add a storybook story file components/sections/Navbar/index.stories.tsx which exercises each of the component's states.

There are 4 Navbar states to capture within styles and stories:

• Light
• Light, mobile
• Dark
• Dark, mobile

Light and dark modes toggle between https://github.com/nodejs/nodejs.org/blob/main/public/static/images/logos/horizontal-light.svg and https://github.com/nodejs/nodejs.org/blob/main/public/static/images/logos/horizontal-dark.svg. I imagine there is a way to do this with just a fill, but I didn't confirm.

Open Questions

• Should the links be defined within site.json? Today many are in navigation.json but that's for the live site.

[bmuenzenmeyer]

Thanks for your interest. We don't assign tickets if we can help it. Feel free to submit a pull request if you have time.
Reference 🍪 https://www.redhat.com/en/blog/dont-lick-cookie

[bmuenzenmeyer]

Looks like we will be using navigation.json per #6064

[mirza-mohibul-hasan]

Is that work done?

[08Uzair]

Please assign this to me i will do this work in 1-2 hrs

[Rounak-stha]

There are 4 Footer states to capture within styles and stories:

Hey, I think you have a typo here. You probably meant to write Navbar right?

[bmuenzenmeyer]

Hey, I think you have a typo here. You probably meant to write Navbar right?

yes

[NIKHIL-bot27]

is this issue still open . Can you please assign me this issue

[ovflowd]

This issue already has an open PR which is already in review...