360dial - Menu Navigation Angular Component Development

Challenge Overview

Welcome to the 360 dial - Menu Navigation Angular Component Development challenge! In this challenge, we are looking for you to develop an Angular component by following the given design.

Technology stack

• Angular 6.2.2

• NodeJS

• HTML

• SCSS

• Typescript

General requirements

Functional requirements

A generic Angular 360 dial navigation component which by default be collapsed as (figure 1) and opens the dial with various navigation items when expanded (figure 2).

It should support at least 2 sub-level navigations when a navigation item is a group. See the following figures.

See the marvel app for the detailed workflow of the component.

Desktop: https://marvelapp.com/cc6216a

Tablet: https://marvelapp.com/7b7d573

Mobile: https://marvelapp.com/6631176

The design assets are attached in the forum.

Additional requirements

Some requirements are not reflected in the marvel app but required as per the client’s request.

1. In Figure 2, once the user taps on a navigation item, if the item is not right-aligned, it should rotate to the right-aligned position clock-wisely first, and then open the sub-level navigations (if have).

For example, in the figure below, the Profile item is right-aligned, so if you tap on the other item, it should rotate to the position of the Profile item close-wisely.

2. The label text in the collapsed component (see Figure 1) should be the title of the selected navigation item. For example, if you selected Network navigation item, then collapse the component, the text in the label should be Network instead of Profile.

3. The Angular component should expose the callbacks for the following actions

   1. The component is collapsed

   2. The component is expanded

   3. The 1st level navigation item is selected

   4. The sub-level navigation item is selected

4. Please be aware that the text in the navigation item is curved, the actual style should follow the design. Here is a CSS trick for you    r reference.

5. The # of navigation items is in the range of 2 - 8. If the items are less than 8, just leave blanks (similar to the sub-level items).

Layout requirements

The component should be responsive. - It should be implemented with all care to make sure; it adjusts its size accordingly; based on form-factors (Mobiles, Tablets, Desktop browsers)

 

Unit test requirements

The unit test is in scope, you should write Unit test with Karma and Jasmine. The test coverage should be at least 85%.
 

Configuration requirements

Configurable based on the Typescript configuration for the below styles and behavior.

• Default navigation item

• Color palette

• Navigation items - labels, icons & is a group (which contains again different navigation items)

• The number of navigation items.

• Routes - to which navigation when clicked to be navigated to

Smooth transition requirements

It should have smooth transitions when

• Dial is expanded

• Dial is collapsed

• Navigation item is clicked

• Dial is rotating

Code formatting

• Your code should be compliant with Angular 6 and later Angular versions.

• You should use Typescript as the scripting language, SCSS for the styling.

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• Use Typescript linter to validate your code. Your code should be lint error-free.

HTML Specific

• HTML should be valid HTML5 compliant.

• All HTML code naming should not have any conflicts or errors.

• Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)

• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• No inline CSS styles- all styles must be placed in an external stylesheet.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge

• Mobile/Tablet:

  • Android: Chrome latest.

  • iOS: Chrome latest, Safari latest.

Final Submission Guidelines

• Full source code of the Angular 6 project with all the requirements implemented.

• Detailed README in markdown format that describes how to configure, build and run the app.

• A separate documentation to describe the Typescript configuration.

• A verification video or doc with screenshots. The verification should cover all the three platforms: Desktop, Mobile and Tablet.