Create NavItem Component

[bmuenzenmeyer]

Create a NavItem component using the new figma design (direct link to Nav) and here is Footer.

This component is a link with additional styling for focus states, and an indicator if the href is an external link. This one component will be used for both the Navbar (green accents) and the Footer (grey accents) in future issues.

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

• Create a new directory called NavItem within the sections directory that contains all the new code. sections may not exist yet
• Use the new tailwind color and typography system to assign properties. For example, the NavItem active states uses Green/600 per the figma.
• Add a storybook story file components/sections/NavItem/index.stories.tsx which exercises each of the component's states.
• Use intelligent detection of the href host compared to the current host to determine if the link is external. If it is, render arrow-up-right icon from the hero icons dependency. This only applies for type === nav

Suggested props include:

• label (string): Learn in the figma
• href (typeof next/link)
• type (enum, nav | footer)

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

• Light, internal link
• Light, internal link, active (focused or hovered)
• Light, external link
• Light, external link, active (focused or hovered)
• Dark, internal link
• Dark, internal link, active (focused or hovered)
• Dark, external link
• Dark, external link, active (focused or hovered)

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

• Light
• Light, active (focused or hovered)
• Dark
• Dark, active (focused or hovered)

[shaikahmadnawaz]

Can I work on this issue?

[bmuenzenmeyer]

yes, go for it! thanks @shaikahmadnawaz

[shaikahmadnawaz]

yes, go for it! thanks @shaikahmadnawaz

Thank you @bmuenzenmeyer

[shaikahmadnawaz]

Yes I did, how can I run without installing dependencies 😗

[ovflowd]

Yes I did, how can I run without installing dependencies 😗

It's a common question to do. I would recommend you to open an issue so that we don't pollute this one. I can only tell you that the whole process works fine on Linux, macOS and Windows because we have CI for that.

Open a new issue reporting this problem and don't forget to attach your Node.js version and NPM version.

[shaikahmadnawaz]

Yes I did, how can I run without installing dependencies 😗

It's a common question to do. I would recommend you to open an issue so that we don't pollute this one. I can only tell you that the whole process works fine on Linux, macOS and Windows because we have CI for that.

Open a new issue reporting this problem and don't forget to attach your Node.js version and NPM version.

Okay 👍

[shaikahmadnawaz]

@ovflowd, check the issue once #5921, I mentioned the problem I am facing while running it locally.

Issue #5921

[shaikahmadnawaz]

#5921 issues solved, now I am good to go. 😊

[fa-901]

@ovflowd I noticed this issue was moved back to Ready status and no one was assigned to it. So I went ahead and made a PR