[FEATURE] "Navigation" Component

[DandyLyons]

Navigation Component

We'll be making a Navigation Component. Please comment with any questions you have.

If you would like to be assigned to this Issue please comment below.

User Story:

As a user, I want to navigate between so that I can find what I'm looking for.

Description:

Navigation Bar

Acceptance Criteria:

• There should be a new file named Navigation.tsx in the src directory.
• Navigation bar does NOT need to navigate to other pages
• Navigation bar should follow the design as closely as possible, inclu. same fonts, layout, icon assets, colors etc.
• Buttons should have some sort of highlight effect when the mouse is hovering over it so that the user can see that it is clickable.
• For consistency, try to follow the structure of the figma design as closely as possible, unless there is a good reason to deviate:
  • e.g. If there is a sub container in Figma, consider putting a sub container in your code.
  • e.g. Try to make sure that the names of your containers and Components in React match the names in Figma.

Design Mockup/Assets:

Go to this link: Navigation Component Design in Figma

Additional Information:

• Use Figma Dev Mode as a STARTING POINT. It will generate CSS code on your behalf. However, don't blindly use the code it generates. Read it yourself, understand it, and make any necessary changes.

Priority:

High

Linked Issues/PRs:

Due Date:

Try to complete this before mid-November.

[DanWang625]

Hi Daniel, Pai and I want to do this one, if this issue was not assigned to anybody else yet.

[DandyLyons]

Fantastic! I've assigned you. Unfortunately, it seems like GitHub won't allow me to assign Pai unless she comments here as well.

[DanWang625]

Thank you, Daniel, I'll let Pai know.

[x5401]

Hi Daniel! I'd like to work on this issue with Dan, thanks!

[DanWang625]

Hi, Daniel, we got some errors when we try to push, can't figure out what the problem is, please find details attached below

[DandyLyons]

Sure, let's troubleshoot.

I noticed that when you called git push origin 8123-fix-issue8 it says you don't have permission to push to DandyLyons/React-Example.git. That would make sense. You should be pushing to your GitHub repo, not mine. (After you push to yours, then you create a PR on GitHub).

So if I'm not mistaken, you should set your upstream to be your repo on your GitHub. (You choose which branch, I usually use dev or main).

The question is did you clone from your fork, or did you clone directly from my GH repo? You should have cloned from your GH repo. (Either way, we should be able to fix this).

What do you see when you call git remote -v?

[DanWang625]

Good troubleshooting, Daniel, you're right, I cloned from yours, that's the problem. I'll reclone from mine. When I call git remote -v, it shows this:

you're totally right.

[DandyLyons]

Fantastic work, you two!

Please see the review that I added: https://github.com/DandyLyons/React-Example/pull/15#pullrequestreview-1725166111

[DandyLyons]

On another note, I would like to ask you two, how was pair programming? How can we improve our process to make everything easier and more enjoyable for everyone?

Were you able to get the VS Code Live Share plugin to work?

• Was it helpful? In what ways, specifically?
• What parts were confusing?
• What parts were tedious and time consuming?

How was working with Figma?

• Was it helpful? In what ways, specifically?
• What parts were confusing?
• What parts were tedious and time consuming?

How was working with GitHub (in Issues, Pull Requests etc.)

• Was it helpful? In what ways, specifically?
• What parts were confusing?
• What parts were tedious and time consuming?

[DandyLyons]

Good troubleshooting, Daniel, you're right, I cloned from yours, that's the problem. I'll reclone from mine. When I call git remote -v, it shows this: you're totally right.

In the future, there is a way to re-setup the upstream repository. This way you don't have to reclone the repo (and thus lose all your work). If I remember correctly the steps would be:

1. Fork my GH repo.
2. Then on your local repo call git remote add <name> <url> where: is the name of the remote repository is the URL of the remote repository
3. Then you can set the upstream by, for example using git push -u <repo name>

[DanWang625]

Thank you so much, learned so much from you