From 4cb535a2e15fdb1054959205504c61c77f183473 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 11 Jan 2016 16:23:34 +0000
Subject: [PATCH] Add progressive enhancement to service switcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- by default, the menu is open
- if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to
  show that it can be opened are added
- clicking it opens and closes it
---
 app/assets/javascripts/dropdown.js            | 18 +++++++
 .../stylesheets/components/dropdown.scss      | 53 +++++++++++++++++++
 ...itcher.scss => management-navigation.scss} |  2 +-
 app/assets/stylesheets/main.scss              |  3 +-
 app/templates/admin_template.html             | 10 ++--
 gulpfile.babel.js                             |  1 +
 6 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/javascripts/dropdown.js
 create mode 100644 app/assets/stylesheets/components/dropdown.scss
 rename app/assets/stylesheets/components/{switcher.scss => management-navigation.scss} (93%)

diff --git a/app/assets/javascripts/dropdown.js b/app/assets/javascripts/dropdown.js
new file mode 100644
index 000000000..c5a2c8e02
--- /dev/null
+++ b/app/assets/javascripts/dropdown.js
@@ -0,0 +1,18 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.Dropdown = function() {
+
+    this.start = function(component) {
+
+      $('.dropdown-toggle', component)
+        .on(
+          'click', () => $(component).toggleClass('js-closed')
+        )
+        .trigger('click');
+
+    };
+
+  };
+
+})(window.GOVUK.Modules);
diff --git a/app/assets/stylesheets/components/dropdown.scss b/app/assets/stylesheets/components/dropdown.scss
new file mode 100644
index 000000000..c467803fe
--- /dev/null
+++ b/app/assets/stylesheets/components/dropdown.scss
@@ -0,0 +1,53 @@
+%dropdown,
+.dropdown {
+
+  position: relative;
+
+  .js-enabled &-toggle {
+
+    color: $link-colour;
+    position: relative;
+    padding-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      color: $link-hover-colour;
+      text-decoration: underline;
+    }
+
+    &::before {
+      content: '▼';
+      font-size: 12px;
+      position: absolute;
+      top: 1px;
+      left: -1px;
+    }
+
+  }
+
+  .js-closed &-toggle::before {
+    content: '▶';
+    left: -1px;
+    top: 2px;
+  }
+
+  a {
+
+    display: block;
+
+    .js-enabled & {
+      padding-left: 20px;
+    }
+
+  }
+
+  &.js-closed {
+
+    a {
+      left: -9999em;
+      position: absolute;
+    }
+
+  }
+
+}
diff --git a/app/assets/stylesheets/components/switcher.scss b/app/assets/stylesheets/components/management-navigation.scss
similarity index 93%
rename from app/assets/stylesheets/components/switcher.scss
rename to app/assets/stylesheets/components/management-navigation.scss
index 72817edff..7464ba682 100644
--- a/app/assets/stylesheets/components/switcher.scss
+++ b/app/assets/stylesheets/components/management-navigation.scss
@@ -1,7 +1,7 @@
 .management-navigation {
 
   @extend %site-width-container;
-  @include core-19();
+  @include core-16();
   border-bottom: 1px solid $border-colour;
   padding: 10px 0 8px;
 
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 22f9f2f0e..7343f9348 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -42,7 +42,8 @@
 @import 'components/banner';
 @import 'components/textbox';
 @import 'components/browse-list';
-@import 'components/switcher';
+@import 'components/management-navigation';
+@import 'components/dropdown';
 
 @import 'views/job';
 
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index 5e91e6cb1..923c59870 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -51,9 +51,13 @@
     <nav class="management-navigation">
       <div class="grid-row">
         <div class="column-half">
-          Service name
-          <a href="#">Switch to A N Other service</a>
-          <a href="#">Add a new service to Notify…</a>
+          <div class="dropdown" data-module="dropdown">
+            <div class="dropdown-toggle">
+              Service name
+            </div>
+            <a href="#">Switch to A N Other service</a>
+            <a href="#">Add a new service to Notify…</a>
+          </div>
         </div>
         <div class="column-half management-navigation-account">
           <a href="{{ url_for('.userprofile') }}">{{ current_user.name }}</a>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index bc492b70c..3830e9c6f 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -48,6 +48,7 @@ gulp.task('jquery', () => plugins.jquery.src({
 gulp.task('javascripts', ['jquery'], () => gulp.src([
     paths.src + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
     paths.src + 'javascripts/highlightTags.js',
+    paths.src + 'javascripts/dropdown.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.babel({