add guidance to side nav and update side nav style

docs/_includes/layouts/component.njk

@@ -27,6 +27,11 @@
     currentPath: page.url,
     items: collections.component | sort(attribute="data.title")
   }) }}
+  {{ appSideNavigation({
+    currentPath: page.url,
+    items: collections.componentGuidance | sort(attribute="data.title"),
+    classes: 'app-side-navigation--section'
+  }) }}
 {% endset %}
 
 {% block main %}

docs/assets/css/components/_side-navigation.scss

@@ -6,7 +6,6 @@
   @include nhsuk-font($size: 16);
 
   display: block;
-  margin-left: - nhsuk-spacing(2);
   padding: nhsuk-spacing(2) 0 0;
 }
 
@@ -27,6 +26,11 @@
 
 .app-side-navigation__item {
   @include nhsuk-font($size: 16);
+  margin-left: - nhsuk-spacing(2);
+
+  a {
+    padding-left: nhsuk-spacing(2);
+  }
 
   a,
   a:link,
@@ -40,7 +44,7 @@
 
   a:hover {
     color: $nhsuk-link-hover-color;
-    text-decoration: underline;
+    border-color: $nhsuk-link-hover-color;
   }
 
   a:focus {
@@ -79,10 +83,30 @@
   }
 }
 
+.app-side-navigation--section {
+  border-top: 1px solid $nhsuk-border-color;
+  padding-top: nhsuk-spacing(4);
+}
+
 .app-side-navigation--mobile {
+  padding-bottom: nhsuk-spacing(4);
+
   .app-side-navigation {
-    padding: 0 0 nhsuk-spacing(4);
+    padding: 0 0 nhsuk-spacing(3);
   }
+
+  .app-side-navigation--section {
+    padding-top: nhsuk-spacing(3);
+  }
+
+  .app-side-navigation__list {
+    margin: 0;
+  }
+
+  .app-side-navigation__item {
+    @include nhsuk-font(19);
+  }
+
   @include mq($from: desktop) {
     display: none;
   }

docs/components/index.md

@@ -7,11 +7,12 @@ description: These are components designed specifically for the needs of NHS App
 
 Check the [NHS design system](https://service-manual.nhs.uk/design-system) to see if the component you need is already being used across the NHS.
 
-If you can't find what you need in the NHS design system or the NHS App design components, you can:
+## Can't find what you need?
 
-- [check the NHS community backlog](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/projects/1) to see if it is being worked on by other teams across the NHS and add your findings
-- [check the NHS App component backlog](https://github.com/orgs/nhsuk/projects/8) to see if it is being worked on by the NHS App and add your findings
-- [add a new component to the NHS App component backlog](https://github.com/nhsuk/nhsapp-frontend/issues/new?assignees=&labels=&projects=&template=new_component_or_pattern.md&title=)
+If you can't find what you need in the NHS design system or the NHS App design components, you can check the:
+
+- [NHS design system backlog](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/projects/1)
+- [NHS App component backlog](https://github.com/orgs/nhsuk/projects/8)
 
 ## Using code snippets in prototypes
 

docs/components/install-nhsapp-frontend-in-your-prototype.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Install NHS App frontend in your prototype
+tags:
+  - componentGuidance
 ---
 
 While most NHS App components are created to automatically work with the NHS prototype kit, some patterns have been created with specific NHS App styles.