Add side navigation

docs/_data/primary-navigation.yml

@@ -1,8 +1,14 @@
-# - title: Home
-#   link: /
+- title: Features
+  link: /features/
 
-# - title: About
-#   link: /about/
+# - title: Pricing
+#   link: /pricing/
 
-# - title: Features
-#   link: /features/
+# - title: Using NHS Notify
+#   link: /using-nhs-notify/
+
+# - title: Support
+#   link: /support/
+
+# - title: Get started
+#   link: /get-started/

docs/_includes/primary-navigation.html

@@ -2,7 +2,7 @@
   <ul class="nhsuk-header__navigation-list">
     {% for p in site.data.primary-navigation -%}
     <li class="nhsuk-header__navigation-item">
-      <a href="{{ p.link | xml_escape }}" class="nhsuk-header__navigation-link">
+      <a href="{{ site.baseurl | append: p.link | xml_escape }}" class="nhsuk-header__navigation-link">
         {{ p.title }}
       </a>
     </li>

docs/_layouts/page.html

@@ -1,9 +1,60 @@
 ---
 layout: default
 ---
+
+{% assign current_dir = page.dir %}
+{% assign paths = page.dir | split: "/"  %}
+{% assign parent_dir = paths[1] %}
+
+{%-
+  assign nav_pages = site.pages
+    | where_exp: "item", "item.dir contains parent_dir"
+-%}
+
+{% assign first_level_dir = parent_dir | prepend: '/' | append: '/' %}
+{%-
+  assign first_level = nav_pages
+    | where_exp: "item", "item.dir == first_level_dir"
+    | group_by: "section"
+    | sort: 'name', 'last'
+-%}
 <div class="nhsuk-width-container">
   <main class="nhsuk-main-wrapper" id="maincontent" role="main">
-    <h1>{{ page.title }}</h1>
-    {{ content }}
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-full">
+        <div class="nhsnotify-pane">
+          <div class="nhsnotify-pane__side-bar nhsuk-grid-column-one-quarter">
+            <nav class="nhsnotify-side-nav">
+              <ul class="nhsuk-list nhsnotify-side-nav__list">
+                {% for section in first_level  %}
+                {% if section.name != "" %}
+                  <p class="nhsuk-u-font-weight-bold nhsnotify-side-nav__list-section">{{ section.name }}</p>
+                {% endif %}
+                  {% assign sorted = section.items | sort: 'nav_order' %}
+                  {% for post in sorted %}
+                    <li class="
+                      nhsnotify-side-nav__item
+                      {% if post.url == page.url %}
+                        nhsnotify-side-nav__item--current
+                      {% endif %}
+                    ">
+                      <a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
+                    </li>
+                  {% endfor %}
+                {% endfor %}
+              </ul>
+
+            </nav>
+          </div>
+          <div class="nhsnotify-pane__main-content nhsuk-grid-column-three-quarters">
+            {% if page.section != "" %}
+              <h5 style="margin-bottom: 0; color: #4c6272">{{ page.section }}</h5>
+            {% endif %}
+            <h1>{{ page.title }}</h1>
+            {{ content }}
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
 </div>

docs/_sass/_nhsnotify-side-nav.scss

@@ -0,0 +1,70 @@
+.nhsnotify-pane {
+  display: flex;
+  min-height: 0;
+  overflow: inherit;
+  position: relative;
+}
+
+.nhsnotify-pane__side-bar {
+  flex: 0 0 auto;
+  width: 280px;
+  padding: 0;
+}
+
+.nhsnotify-pane__main-content {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.nhsnotify-side-nav__list {
+  font-size: 1em;
+  line-height: 1.3;
+  margin-bottom: 0;
+}
+
+.nhsnotify-side-nav__list-section {
+  @extend .nhsuk-u-font-weight-bold;
+  color: #4c6272;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  font-size: 1em;
+}
+
+.nhsnotify-side-nav__item {
+  padding: 4px 0 0.5em 1.3em;
+
+  &:first-child {
+    padding-left: 0;
+
+    &.nhsnotify-side-nav__item--current {
+      left: -1.2em;
+      padding-left: 1em;
+      position: relative;
+    }
+  }
+}
+
+.nhsnotify-side-nav__item--current {
+  font-weight: 600;
+  border-left: 4px solid $blue-000;
+  padding-left: 1em;
+}
+
+.nhsnotify-side-nav__link {
+  text-decoration: none;
+
+  &:visited {
+    color:  $blue-000;
+  }
+
+  &:hover {
+    color: #7c2855;
+    text-decoration: underline;
+  }
+
+  &:focus {
+    color: #212b32;
+  }
+}

docs/_sass/_nhsnotify.scss

@@ -66,3 +66,15 @@
   @extend .nhsuk-heading-m;
   margin: 0;
 }
+
+.nhsuk-header__navigation-list {
+  justify-content: flex-start;
+}
+
+.nhsuk-header__navigation-link {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

docs/assets/css/main.scss

@@ -3,3 +3,4 @@
 @import "../../node_modules/nhsuk-frontend/packages/nhsuk";
 @import "nhs-colours";
 @import "nhsnotify";
+@import "nhsnotify-side-nav";

docs/pages/features/emails.md

@@ -0,0 +1,10 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: page
+title: Emails
+nav_order: 2
+permalink: /features/emails
+section: Message channels
+---

docs/pages/features/index.md

@@ -4,7 +4,6 @@
 
 layout: page
 title: Features
-nav_order: 3
-has_children: true
+nav_order: 1
 permalink: /features/
 ---

docs/pages/features/letters.md

@@ -0,0 +1,10 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: page
+title: Letters
+nav_order: 2
+permalink: /features/letters
+section: Message channels
+---