diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index ac28a484f5..e77e805f0c 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -8,11 +8,12 @@ version = current.path[2].replace(/\_+/gm, ".")
-mixin tree(directory, urlPrefix, name)
+mixin tree(directory, urlPrefix, name, latest)
ul
- for val, key in directory
- if key !== '.git' && key !== '_data'
- li #{name} #{key}
+ for val, semvar in directory
+ if semvar !== '.git' && semvar !== '_data'
+ libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".")
+ li #{name} #{libVersion}
@@ -31,11 +32,14 @@ if language == 'dart'
-h2.hero-subtitle.text-subhead
- button(md-button ng-click="showVersionMenu($event)") #{title}
+nav.hero-subtitle.text-subhead.dropdown
+ button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}
+ div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
-
-
-nav.dropdown.is-hidden
- mixin tree(public.docs.js, "/docs/js", "Javascript")
- mixin tree(public.docs.dart, "/docs/dart", "Dart")
\ No newline at end of file
+
+ div(class="dropdown-menu ng-hide" ng-show="showMenu")
+ mixin tree(public.docs.js, "/docs/js", "Javascript", jsLatest)
+ mixin tree(public.docs.dart, "/docs/dart", "Dart", dartLatest)
+ ul
+ li #{name} Angular 1.X
+ li #{name} AngularDart 1.X
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index cc09177173..6cd3b37365 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -27,6 +27,7 @@
@import 'module/code';
@import 'module/sticker';
@import 'module/bio-card';
+@import 'module/overlay';
/*
diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss
index e69de29bb2..f63d7b569b 100644
--- a/public/resources/css/module/_dropdown.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_overlay.scss b/public/resources/css/module/_overlay.scss
new file mode 100644
index 0000000000..026a922496
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/resources/js/site.js b/public/resources/js/site.js
index e6f04c7c0b..d13fbc4df4 100644
--- a/public/resources/js/site.js
+++ b/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() {
- $mdDialog.show(
- $mdDialog.alert()
- .title('Choose a Version')
- .content('libraries')
- .ariaLabel('Angular Version Menu')
- .ok('Done')
- .targetEvent(event)
- );
+ $scope.toggleVersionMenu = function(event) {
+ $scope.showMenu = !$scope.showMenu;
+
+ item.toggleClass('is-hidden');
};
$scope.showBio = function (event) {