add back themes

src/stylesheets/components/_mobile-navigation.scss

@@ -1,3 +1,16 @@
+.app-mobile-navigation__theme {
+  @include govuk-typography-common;
+  position: relative; // this is to get around the artificial click area generated by the :after of the parent button
+  margin: 0;
+  padding: 0;
+  color: govuk-colour("dark-grey");
+  // Font is defined as a hard 19px so
+  // it does not re-size on mobile viewport
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+  font-weight: normal;
+}
+
 .app-mobile-navigation .govuk-service-navigation__item--active {
   @include govuk-media-query($until: tablet) {
     border-color: transparent;

views/partials/_mobile-navigation.njk

@@ -1,13 +1,20 @@
 {% macro mobileNavigation(params) %}
   {% if params.items %}
-      <ul class="app-navigation__list">
-        {% for item in params.items %}
+    <ul class="app-navigation__list">
+      {% for theme, items in params.items | groupby("theme") %}
+        {% if theme != 'undefined' %}
+          <li class="app-navigation__subnav-item">
+            <h3 class="app-mobile-navigation__theme" >{{ theme }}</h3>
+          </li>
+        {% endif %}
+        {% for item in items %}
           <li class="app-navigation__subnav-item">
             <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="{{ item.href }}">
               {{ item.text }}
             </a>
           </li>
         {% endfor %}
-      </ul>
+      {% endfor %}
+    </ul>
   {% endif %}
 {% endmacro %}

views/partials/_navigation.njk

@@ -15,7 +15,7 @@
     {% set subNavItems = subNavItems.concat(item.items) %}
   {% endif %}
 
-  {% set subNavItemHtml = mobileNavigation({ items: subNavItems.concat(item.items) }) %}
+  {% set subNavItemHtml = mobileNavigation({ items: subNavItems.concat(item.items), theme: item.theme }) %}
 
   {% set navItem = {
     href: item.href,