Navigation Bar

This is what we are looking to achieve by the end of this section:

---

Steps:

1. Create a <NavBar /> component which renders a <div>, and import it into your <App /> component. This is useful as it'll enable you to preview any changes you make to it by running the application with npm start.

2. Create a navbar.css file in /styles and import it into your component.

3. Add a navbar class with some styling (we've given ours a white background and a grey bottom border) and add it to the <div> in your <NavBar /> component.

4. Inside the <div> in the <NavBar /> component, add an image for the logo:

.

✔️ You might want to add some CSS styling to this to reduce the size of the image 😱

5. Add an unordered list inside the <div> and give it a class name of navbar-links. Use this class selector to style the list so it doesn't have any margins or padding.

6. Add two list elements to your <ul> and give them a class name of navbar-links-item. Each list item will be a hyperlink, one with the text "View Properties" and the other with "Add a Property". In your CSS, style these list items by using the navbar-links-item class selector so they:

• have no margin
• have some padding (we leave you to experiment)
• display as an inline-block.

👏 You now have two items for your navigation!

Recommended Reading

• CSS Display Properties