Add a new pattern for sub-navigation

This is like the ‘pill’ pattern that we use for filtering lists of
notifications. However it is meant for navigating between discrete
things, not a filtered view of the same list.

This is why is has a gutter between each item, and no selected state.

Turns out we already had a pattern about this on the dashboard, so this
commit also changes the dashboard to use the same code.

app/assets/stylesheets/components/pill.scss

@@ -55,3 +55,26 @@
     color: $text-colour;
   }
 }
+
+.pill-separate {
+
+  &-item {
+
+    display: block;
+    text-align: left;
+    padding: 10px $gutter-half;
+
+    &:link,
+    &:visited {
+      background: $link-colour;
+      color: $white;
+      text-decoration: underline;
+    }
+
+    &:hover {
+      color: $light-blue-25;
+    }
+
+  }
+
+}