Build a navigation for a website. Use CSS, HTML, and React to develop a responsive navbar with login/logout. You can start with the code in index.html or create your own project.

• Demonstrate use of web standards including HTML5.
• Use a separate CSS file.
• Make the navbar responsive with at least one breakpoint (your choice as to how it looks on a smaller screen width).
• Follow the style guidelines listed below.
• Add buttons or links to login/logout.
• Add image logo
• Make production/deployable ready
• Clean code
• Components best practices

• Use SASS or LESS to pre-compile your CSS.
• Babel for ES6 -> ES5
• Add a CSS animation with transitions. (Loading login component)
• Use JavaScript to control whether the login or the logout button is shown; only one should be visible at a time.
• Hosted online. (Heroku, firebase, AWS, etc.)
• Add the login component with
  • username / password
  • labels
  • login button

• Use the "Roboto" Google font
• Use the following colors

  • Navbar background: #2B386F

  • Navbar font: #FFFFFF

  • Page background: #FFFFFF

  • Default/normal font color: #20285b