Challenge Overview

Challenge Objectives

Create the UI Prototype for our new re-designed Header Navigation component based on the provided designs.

We are in the process of creating the new re-designed Navigation components for our platform.

As part of this challenge, you need to create the responsive UI Prototype for our new re-designed Header component using HTML5/SCSS/JS.

You will find the designs on the challenge forum.

Only the primary/secondary navigation and the user dropdown from the provided designs are in the scope of this challenge.

All components should be themable. For example, we have “Light” and “Dark” themes for the secondary menu.
Consider the primary menu theme as the “Dark” theme.
The secondary menu will change when you click on an item from the primary menu. For example, when you click on “Development”, it’ll show the secondary menu under the “Development” item.
The “USER MENU” shows the expanded user dropdown menu. This will show up when you click on the user icon/name on the upper-right corner.
Clicking outside of the user dropdown will close it.
For the secondary menu, use the animation from https://tympanus.net/Development/LineMenuStyles/#Alonso to switch the active item.
As we shrink the browser window, the menu items that don’t fit in the screen should be placed in the “More” dropdown menu (refer to “SECTION MENU / LIGHT - COLLAPSED FIRST LEVEL”. This applies to both the primary and the secondary menu.
The “MORE” section from the mobile design is not visible on tablet/desktop devices.

Feel free to ask on the challenge forum!

Use SCSS variables instead of hardcoding colors/paddings etc.
Use Vanilla JS. No jQuery or any other library is allowed.
Your code should be as clean, well-structured and well-documented as possible. The goal is to take your code and convert it into different forms (eg wordpress/react/angular) to be able to use it in our various applications.
Use fluid layout.
You need to create both logged in and logged out states.

Submit your source code in a zip file.