Userstory 8 - Create a Navigation Bar

[YuriPadilla]

Value Proposition

As a User, I want to see a navigation bar , so that I can navigate easier between pages.

Description

Acceptance Criteria

• [x] A navigation bar is display,
• [x] Clicking on an icon (next/Link) opens the respective page,
• [x] The respective icon is highlighted depending on the current page (see the Excalidraw picture),
• [x] In page "Details", the button "Back" redirects to the page "Bikes",
• [x] The buttons "Previous" and "Next" are displayed on page "Details",
• [x] Clicking on button "Next" shows the next bike,
• [x] Clicking on button "Previous" shows the previous bike,
• [x] If the showed bike is the first one, the button "Previous" is be inactive,
• [x] If the showed bike is the last one, the button "Next" is be inactive,
• [x] If the showed bike is already in the Shopping Cart, the button "Add to shopping cart" is disable.

Tasks

• [x] Create the component "NavBar" which returns a <nav> element,
  • [x] Add a link on every icon to its respective page,
  • [x] Implement a highlight functionality, so that the respective icon is highlighted depending on the respective page.
• [x] Display this component "NavBar" on every page.
  • [x] Create also the page "InfoPage" to see the "Lease Time and Price" information with more detail.

In order to improve the navigation experience:

• [x] Create the button "Back" in the "Details" page in "/Bikes/[id].js" as shown in the image above to be able to get back to page "Bike" again,
• [x] Remove unnecessary history of links,
• [x] Create buttons "Previous" and "Next" in the component "ProductDetails" as shown in the image above to be able to get the "Details" page of the next or previous bike respectively,
• [x] Add functionality so that when clicking on a picture in the shopping car, the "Details" page of the respective bike is displayed.

Complexity

L

[marcterre]

Hey Yuri, in your acceptance criteria you should describe which icon you use for which page and if its a Link or a Button (like you did in your tasks). The rest looks good, i like the wireframes! 👍

[YuriPadilla]

Hi Marc! Thanks for your review!!!

I've already updated it...!!!

Many greetings to you! 😀👍