Huge Navigation Exercise

Overview

This exercise will have the candidate build a responsive site navigation driven by an AJAX request.

On The Server	On The Client	Development
express	javascript	Gulp
	stylus	livereload

You need Node.js installed and running.

We use Gulp as our task runner. Get the CLI (command line interface).

$ npm install gulp -g

$ git clone https://github.com/juvasquezg/NavExercise.git && cd ./NavExercise
$ npm install
$ gulp

gulp

npm test

if you get ** -bash: make: commad not found ** please install make in Unix based systems or run

./node_modules/.bin/mocha  test/

npm start

Default port is 3000, sure that this port is available.

You can put the public directory in a [nginx] or [apache] server.

We use npm as our Dependecy Management.

Here are the guidelines for this exercise

No frameworks or libraries (this means jquery).
Chrome compliance is all that's required, all functions and features available in Chrome are in play.
Nav must be responsive.
Code must run after the following command, please ensure your code runs as you expect it to from a fresh checkout with these commands before submission.

$ npm i && npm start

Nice to haves:

At a high level the navigation will have two main states

<768px: Mobile. Hamburger icon will display in the top-left of the page. Clicking the hamburger will cause a card to slide in and overlay the content from the left. The card will contain nav and sub-nav items defined in the JSONP response
>= 768px: Desktop. The nav will display as a horizontal nav. Top level nav items will display sub-nav items when clicked. No hamburger will be shown.

0.1.0

Mockup - Illustrator file describing how the nav should behave
server.js - node.js server that will host the site and provie the api to construct the nav

git clone git@github.com:hugeinc/NavExercise.git
cd NavExercise
npm install
npm start

Measurements are specified in pixels. Dimensions are fluid unless specified.

On hover, Primary Navigation reverses color (white/magenta).
On click, if item contains a URL, Primary Navigation navigates to a new page.
On click, if item contains other items, Secondary Navigation appears (see Desktop, Secondary Navigation).
Menu appears containing Secondary Navigation.
Translucent mask appears over content, behind menu.
On hover in, Secondary Navigation changes color (magenta/light gray).
On click, Secondary navigates to a new page.
On click outside of menu, menu and mask are hidden.

When a user clicks the open navigation icon (“hamburger”), the navigation should “push” from left to right.
The HUGE logo and navigation toggle slide left to right.
The open navigation icon should change to the close navigation icon (“x”).
Translucent mask appears over content, right of navigation.
The Primary Navigation should include link items and menu items.
When a user hovers a Primary Navigation item, it should change color (magenta/light gray).
When a user clicks a Primary Navigation link item, the browser should navigate to a new page.
When a user clicks a Primary Navigation menu item, the Secondary Navigation should “push” down, the chevron should rotate * 180°.
When a user hovers a Secondary Navigation item, it should change color (magenta/light gray).
When a user clicks a Secondary Navigation item, browser should navigate to a new page.
When a user clicks outside of the navigation, the navigation should close.
When the navigation closes:
- the menu should “pull” from right to left
- the logo and toggle button should “slide” from right to left
- the close icon should change to the open icon
- the mask should be hidden