In this challenge, you will develop a minimal yet effective responsive navigation bar that exemplifies principles of responsive design, transitioning fluidly between desktop, tablet, and mobile views.

The navigation should offer an adaptive hamburger menu on smaller devices to maximize space and maintain usability.

User stories

• As a desktop user, I want to easily access all sections of the website with clear, clickable links, so that I can navigate the site without any confusion or delay.
• As a tablet / mobile user, I want the navigation bar to collapse into an adaptive hamburger menu to avoid clutter on my screen, with the option to expand it when I need to find more information.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Interactivity:
  • Links & Icon-buttons: Implement and style interactable components like links and icon buttons to reflect different states - default, hover, and focus.
  • Buttons: Implement and style buttons to reflect different states - normal, hover, focus, and disabled.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Adaptive hamburger menu: Hamburger menu should be implemented for tablet and mobile views. The menu should be expanded once the hamburger icon is tapped on.
  • Transition on responsive breakpoints: The transition from full navigation bar on desktop to hamburger menu on tablet and mobile should be fluid and natural, occurring at the appropriate breakpoints for tablet and mobile.
• Accessibility and interactivity: Ensure all menu items are displayed with adequate spacing for touch targets to accommodate users navigating via touchscreens.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance across devices: Ensure that the navigation bar and hamburger performs well on all devices, with quick load times and smooth transitions.
• [Stretch goal] Comprehensive accessibility: Build the navigation bar and hamburger menu with a focus on accessibility, making sure that it complies with WCAG guidelines and provides a fully accessible user experience.