implement consumer Marketplace navigation widget (bug 744418)

media/css/mkt/buttons.less

@@ -1,9 +1,6 @@
 @import 'lib';
 
 // yeah yeah this is too fancy.
-@btn-b: #44A5E1;
-@btn-b-dark: #267CC2;
-@btn-b-lite: saturate(spin(@btn-b, 4), 4%);
 
 @btn-r: lighten(spin(@btn-b, -220), 10%);
 @btn-r-dark: darken(spin(@btn-r, 3), 8%);

media/css/mkt/header.less

@@ -34,6 +34,7 @@
         display: block;
         position: relative;
         overflow: hidden;
+        outline: none;
         // CSS Menu icon.
         b, b:before, b:after {
             position: absolute;
@@ -59,6 +60,98 @@
             top: 20px;
         }
     }
+    nav {
+        position: relative;
+    }
+    nav ul {
+        .transition-property(~'top, opacity, visibility');
+        .transition-duration(.3s);
+        .border-radius(5px);
+        .box-shadow(0 1px 4px fadeOut(@black, 50%));
+        background: @white;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        visibility: hidden;
+        top: 32px;
+        right: 0;
+        .width(3);
+        z-index: 9001;
+        &.active {
+            opacity: 1;
+            visibility: visible;
+            top: 70px;
+        }
+        li:first-child a:before {
+            .box-shadow(1px 1px 0 rgba(255,255,255,.1) inset,
+                        -1px -1px 0 fadeOut(@black, 75%));
+            .transform(~'rotate(45deg)');
+            background: @white;
+            content: "";
+            height: 12px;
+            position: absolute;
+            top: -5px;
+            right: 13px;
+            z-index: 2;
+            width: 12px;
+        }
+        li:first-child a:hover:before {
+            .gradient-two-color(@btn-b, lighten(@btn-b-dark, 13%));
+        }
+        li {
+            + li {
+                border-top: 1px solid @medium-gray;
+            }
+            &:first-child a {
+                .border-radius(5px 5px 0 0);
+            }
+            &:last-child a {
+                .border-radius(0 0 5px 5px);
+            }
+        }
+        a, a:after {
+            height: 30px;
+        }
+        a {
+            color: @link;
+            display: block;
+            font-size: 15px;
+            line-height: 30px;
+            padding: 0 15px;
+            position: relative;
+            z-index: 2;
+            &:after {
+                .transition(.2s right);
+                background: url(../../img/mkt/arrows/plain.gif) 100% 50% no-repeat;
+                content: "";
+                display: block;
+                opacity: .7;
+                position: absolute;
+                top: 0;
+                right: 15px;
+                width: 18px;
+            }
+            &:hover, &:active {
+                .gradient-two-color(@btn-b, @btn-b-dark);
+                color: @white;
+                text-decoration: none;
+                &:after {
+                    opacity: 1;
+                    right: 10px;
+                }
+            }
+            &:active {
+                .box-shadow(inset 0 2px 0 0 rgba(0,0,0,.2),
+                            inset 0 12px 24px 6px rgba(0,0,0,.2),
+                            inset 0 0 2px 2px rgba(0,0,0,.2));
+            }
+        }
+    }
+}
+
+.nav-overlay.show {
+    background: transparent;
 }
 
 /* Content header (breadcrumbs, heading, subnav) - used on Account Settings, etc. */
@@ -160,4 +253,12 @@
             }
         }
     }
+    #site-header {
+        nav ul {
+            top: 115px;
+            &.active {
+                top: 150px;
+            }
+        }
+    }
 }

media/css/mkt/lib.less

@@ -44,6 +44,10 @@
 @bg: #dee3e6;
 @pale-bg: #eff1f3;
 
+@btn-b: #44A5E1;
+@btn-b-dark: #267CC2;
+@btn-b-lite: saturate(spin(@btn-b, 4), 4%);
+
 
 // Font Stacks
 @open-stack: "Open Sans", "Helvetica Neue", Arial, sans-serif;

media/js/mkt/init.js

@@ -39,4 +39,15 @@ $(function() {
 
     // Add class for touch devices.
     $('body').addClass(z.capabilities.touch ? 'touch' : 'desktop');
+
+    // Navigation toggle.
+    var $header = $('#site-header'),
+        $nav = $header.find('nav ul');
+    $header.on('click', '.menu-button', function() {
+        $nav.toggleClass('active');
+        $('.nav-overlay').addClass('show');
+    });
+    $(window).bind('overlay_dismissed', function() {
+       $nav.removeClass('active');
+    });
 });

mkt/home/templates/home/home.html

@@ -32,7 +32,7 @@
   <section class="popular slider full">
     {{ popular|promo_slider }}
   </section>
-  <section class="categories full">
+  <section id="categories" class="categories full">
     <div><h2>{{ _('All categories') }}</h2></div>
   </section>
   <section class="categories slider full">

mkt/templates/mkt/header.html

@@ -1,22 +1,29 @@
 <header id="site-header">
   <section>
     <h1><a href="{{ url('home') }}">{{ _('Mozilla Marketplace') }}</a></h1>
-    <a href="#" class="menu-button"><b></b></a>
     <nav>
+      <a href="#" class="menu-button"><b></b></a>
+      {% block search %}
+        {% set search_form = SimpleSearchForm(request) %}
+        <form id="search" action="{{ url('search.search') }}">
+          <input id="search-q" type="text" name="q" autocomplete="off" title=""
+                 placeholder="{{ _('Search') }}"
+                 value="{{ search_form.q.value() }}">
+          {% if search_form.cat.value() %}
+            {{ search_form.cat }}
+          {% endif %}
+          <div id="site-search-suggestions"
+               data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
+          <button id="search-go">Go</button>
+        </form>
+      {% endblock %}
+      <ul>
+        <li><a href="{{ url('home') }}">{{ _('Home') }}</a></li>
+        <li><a href="{{ url('browse.apps') }}?sort=featured">{{ _('Featured') }}</a></li>
+        <li><a href="{{ url('browse.apps') }}?sort=popular">{{ _('Popular') }}</a></li>
+        <li><a href="#categories">{{ _('Categories') }}</a></li>
+      </ul>
     </nav>
-    {% block search %}
-      {% set search_form = SimpleSearchForm(request) %}
-      <form id="search" action="{{ url('search.search') }}">
-        <input id="search-q" type="text" name="q" autocomplete="off" title=""
-               placeholder="{{ _('Search') }}"
-               value="{{ search_form.q.value() }}">
-        {% if search_form.cat.value() %}
-          {{ search_form.cat }}
-        {% endif %}
-        <div id="site-search-suggestions"
-             data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
-        <button id="search-go">Go</button>
-      </form>
-    {% endblock %}
   </section>
 </header>
+<div class="overlay nav-overlay"></div>