dropdown

public/_includes/_version-dropdown.jade

@@ -8,11 +8,12 @@ version = current.path[2].replace(/\_+/gm, ".")
 
 
 <!-- VERSION TREE CREATOR MIXIN -->
-mixin tree(directory, urlPrefix, name)
+mixin tree(directory, urlPrefix, name, latest)
   ul
-    for val, key in directory
+    for val, semvar in directory
-      if key !== '.git' && key !== '_data'
+      if semvar !== '.git' && semvar !== '_data'
-        li <a href="#{urlPrefix}/#{key}/">#{name} #{key}</a>
+        libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
+        li <a href="#{urlPrefix}/#{semvar}/" md-button>#{name} #{libVersion}</a>
 
 
 <!-- BUTTON TITLE GENERATION  -->
@@ -31,11 +32,14 @@ if language == 'dart'
 
 
 <!-- DROPDOWN BUTTON -->
-h2.hero-subtitle.text-subhead
+nav.hero-subtitle.text-subhead.dropdown
-  button(md-button ng-click="showVersionMenu($event)") #{title}  <span class="icon-arrow-drop-down"></span>
+  button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}  <span class="icon-arrow-drop-down"></span>
+  div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
 
-
+  <!-- DROPDOWN MENU -->
-<!-- DROPDOWN MENU -->
+  div(class="dropdown-menu ng-hide" ng-show="showMenu")
-nav.dropdown.is-hidden
+    mixin tree(public.docs.js, "/docs/js", "Javascript", jsLatest)
-  mixin tree(public.docs.js, "/docs/js", "Javascript")
+    mixin tree(public.docs.dart, "/docs/dart", "Dart", dartLatest)
-  mixin tree(public.docs.dart, "/docs/dart", "Dart")
+    ul
+      li <a href="https://angularjs.org/" md-button>#{name} Angular 1.X</a>
+      li <a href="https://angulardart.org/" md-button>#{name} AngularDart 1.X</a>

public/resources/css/main.scss

@@ -27,6 +27,7 @@
 @import 'module/code';
 @import 'module/sticker';
 @import 'module/bio-card';
+@import 'module/overlay';
 
 
 /*

public/resources/css/module/_dropdown.scss

@@ -0,0 +1,48 @@
+.dropdown {
+  position: relative;
+  z-index: $layer-5;
+
+  .dropdown-button {
+    background: none;
+    border: none;
+    text-transform: none;
+    font-weight: normal;
+    line-height: $unit * 4;
+    padding: 0px $unit;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    background: $snow;
+    box-shadow: 0px 2px 5px rgba($coal, .3);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: $layer-5;
+
+    ul {
+      list-style-type: none;
+      margin: 0px 0px ($unit * 2) 0px;
+      padding: 0px;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    li {
+      margin: 0px;
+    }
+
+    a {
+      display: block;
+      line-height: $unit * 5;
+      padding: 0px ($unit * 2);
+      font-size: 14px;
+      text-decoration: none;
+      text-align: left;
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+  }
+}

public/resources/css/module/_overlay.scss

@@ -0,0 +1,8 @@
+.overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: $layer-3;
+}

public/resources/js/site.js

@@ -14,20 +14,16 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial'])
     });
 });
 
+
 angularIO.controller('AppCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){
   $scope.toggleSidenav = function(menuId) {
     $mdSidenav(menuId).toggle();
   };
 
-  $scope.showVersionMenu = function() {
+  $scope.toggleVersionMenu = function(event) {
-    $mdDialog.show(
+    $scope.showMenu = !$scope.showMenu;
-      $mdDialog.alert()
+
-        .title('Choose a Version')
+    item.toggleClass('is-hidden');
-        .content('libraries')
-        .ariaLabel('Angular Version Menu')
-        .ok('Done')
-        .targetEvent(event)
-    );
   };
 
   $scope.showBio = function (event) {