Add progressive enhancement to service switcher

- 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

@@ -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);

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;
+    }
+
+  }
+
+}

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;
 

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';
 

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>

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({