Merge pull request #65 from alphagov/switcher-bar

Add bar containing service name, name/link to profile and sign out

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,60 @@
+%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;
+    margin-top: 3px;
+
+    .js-enabled & {
+
+      padding-left: 20px;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+    }
+
+  }
+
+  &.js-closed {
+
+    a {
+      left: -9999em;
+      position: absolute;
+    }
+
+  }
+
+}

app/assets/stylesheets/components/management-navigation.scss

@@ -0,0 +1,36 @@
+.management-navigation {
+
+  @extend %site-width-container;
+  @include core-16();
+  border-bottom: 1px solid $border-colour;
+  padding: 10px 0 8px;
+
+  a {
+
+    &:link,
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:hover {
+      color: $link-hover-colour;
+      text-decoration: underline;
+    }
+
+  }
+
+  &-account {
+
+    @include media(tablet) {
+
+      text-align: right;
+
+      a {
+        margin-left: 20px;
+      }
+
+    }
+
+  }
+
+}

app/assets/stylesheets/components/navigation.scss

@@ -1,6 +1,6 @@
 .navigation {
 
-  padding: $gutter 0 0 0;
+  padding: 3px 0 0 0;
 
   li {
     @include core-16();
@@ -21,6 +21,7 @@
 
   a:hover {
     color: $link-hover-colour;
+    text-decoration: underline;
   }
 
 }

app/assets/stylesheets/main.scss

@@ -42,6 +42,8 @@
 @import 'components/banner';
 @import 'components/textbox';
 @import 'components/browse-list';
+@import 'components/management-navigation';
+@import 'components/dropdown';
 
 @import 'views/job';
 

app/assets/stylesheets/views/job.scss

@@ -1,3 +1,4 @@
 .job-totals {
+  margin-top: $gutter;
   margin-bottom: $gutter;
 }

app/templates/admin_template.html

@@ -31,13 +31,6 @@
       <div class="phase-banner-beta">
         <strong class="phase-tag">BETA</strong>
       </div>
-      {% if current_user.is_authenticated() %}
-      <nav id='proposition-menu'>
-        <p id='proposition-link'>
-          <a href="{{ url_for('main.sign_out')}}">Sign out</a>
-        </p>
-      </nav>
-      {% endif %}
     </div>
   </div>
 {% endblock %}
@@ -53,20 +46,41 @@
 {% endif %}
 
 {% block content %}
-<main id="content" role="main" class="page-container">
+
-    {% with messages = get_flashed_messages() %}
+  {% if current_user.is_authenticated() %}
-    {% if messages %}
+    <nav class="management-navigation">
-    <div class="error-summary">
+      <div class="grid-row">
-        <ul>
+        <div class="column-half">
-            {% for message in messages %}
+          <div class="dropdown" data-module="dropdown">
-            <li>{{ message }}</li>
+            <div class="dropdown-toggle">
-            {% endfor %}
+              Service name
-        </ul>
+            </div>
-    </div>
+            <a href="#">Switch to A N Other service</a>
-    {% endif %}
+            <a href="#">Add a new service to Notify…</a>
-    {% endwith %}
+          </div>
-    {% block fullwidth_content %}{% endblock %}
+        </div>
-</main>
+        <div class="column-half management-navigation-account">
+          <a href="{{ url_for('.userprofile') }}">{{ current_user.name }}</a>
+          <a href="{{ url_for('main.sign_out')}}">Sign out</a>
+        </div>
+      </div>
+    </nav>
+  {% endif %}
+
+  <main id="content" role="main" class="page-container">
+      {% with messages = get_flashed_messages() %}
+      {% if messages %}
+      <div class="error-summary">
+          <ul>
+              {% for message in messages %}
+              <li>{{ message }}</li>
+              {% endfor %}
+          </ul>
+      </div>
+      {% endif %}
+      {% endwith %}
+      {% block fullwidth_content %}{% endblock %}
+  </main>
 {% endblock %}
 
 {% block body_end %}

app/templates/main_nav.html

@@ -1,5 +1,7 @@
 <nav class="navigation">
-  <h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3>
+  <ul>
+    <li><a href="{{ url_for('.dashboard') }}">Dashboard</a></li>
+  </ul>
   <ul>
     <li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
     <li><a href="{{ url_for('.sendemail') }}">Send emails</a></li>
@@ -12,7 +14,4 @@
     <li><a href="{{ url_for('.manageusers') }}">Manage users</a></li>
     <li><a href="{{ url_for('.service_settings') }}">Service settings</a></li>
   </ul>
-  <ul>
-    <li><a href="/user-profile">Your details</a></li>
-  </ul>
 </nav>

app/templates/views/dashboard.html

@@ -8,8 +8,6 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-xlarge">Service name</h1>
-
 		<ul class="grid-row job-totals">
 			<li class="column-half">
 				{{ big_number(

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