Skip to content

Commit d75cb1c

Browse files
bhansell1bhansell1
authored
CCM-0001: add side navigation (#36)
1 parent 68ed328 commit d75cb1c

File tree

9 files changed

+170
-11
lines changed

9 files changed

+170
-11
lines changed

‎docs/_data/primary-navigation.yml‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
# - title: Home
2-
# link: /
1+
- title: Features
2+
link: /features/
33

4-
# - title: About
5-
# link: /about/
4+
# - title: Pricing
5+
# link: /pricing/
66

7-
# - title: Features
8-
# link: /features/
7+
# - title: Using NHS Notify
8+
# link: /using-nhs-notify/
9+
10+
# - title: Support
11+
# link: /support/
12+
13+
# - title: Get started
14+
# link: /get-started/

‎docs/_includes/primary-navigation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ul class="nhsuk-header__navigation-list">
33
{% for p in site.data.primary-navigation -%}
44
<li class="nhsuk-header__navigation-item">
5-
<a href="{{ p.link | xml_escape }}" class="nhsuk-header__navigation-link">
5+
<a href="{{ site.baseurl | append: p.link | xml_escape }}" class="nhsuk-header__navigation-link">
66
{{ p.title }}
77
</a>
88
</li>

‎docs/_layouts/page.html‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,60 @@
11
---
22
layout: default
33
---
4+
5+
{% assign current_dir = page.dir %}
6+
{% assign paths = page.dir | split: "/" %}
7+
{% assign parent_dir = paths[1] %}
8+
9+
{%-
10+
assign nav_pages = site.pages
11+
| where_exp: "item", "item.dir contains parent_dir"
12+
-%}
13+
14+
{% assign first_level_dir = parent_dir | prepend: '/' | append: '/' %}
15+
{%-
16+
assign first_level = nav_pages
17+
| where_exp: "item", "item.dir == first_level_dir"
18+
| group_by: "section"
19+
| sort: 'name', 'last'
20+
-%}
421
<div class="nhsuk-width-container">
522
<main class="nhsuk-main-wrapper" id="maincontent" role="main">
6-
<h1>{{ page.title }}</h1>
7-
{{ content }}
23+
<div class="nhsuk-grid-row">
24+
<div class="nhsuk-grid-column-full">
25+
<div class="nhsnotify-pane">
26+
<div class="nhsnotify-pane__side-bar nhsuk-grid-column-one-quarter">
27+
<nav class="nhsnotify-side-nav">
28+
<ul class="nhsuk-list nhsnotify-side-nav__list">
29+
{% for section in first_level %}
30+
{% if section.name != "" %}
31+
<p class="nhsuk-u-font-weight-bold nhsnotify-side-nav__list-section">{{ section.name }}</p>
32+
{% endif %}
33+
{% assign sorted = section.items | sort: 'nav_order' %}
34+
{% for post in sorted %}
35+
<li class="
36+
nhsnotify-side-nav__item
37+
{% if post.url == page.url %}
38+
nhsnotify-side-nav__item--current
39+
{% endif %}
40+
">
41+
<a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
42+
</li>
43+
{% endfor %}
44+
{% endfor %}
45+
</ul>
46+
47+
</nav>
48+
</div>
49+
<div class="nhsnotify-pane__main-content nhsuk-grid-column-three-quarters">
50+
{% if page.section != "" %}
51+
<h5 style="margin-bottom: 0; color: #4c6272">{{ page.section }}</h5>
52+
{% endif %}
53+
<h1>{{ page.title }}</h1>
54+
{{ content }}
55+
</div>
56+
</div>
57+
</div>
58+
</div>
859
</main>
960
</div>

‎docs/_sass/_nhsnotify-side-nav.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.nhsnotify-pane {
2+
display: flex;
3+
min-height: 0;
4+
overflow: inherit;
5+
position: relative;
6+
}
7+
8+
.nhsnotify-pane__side-bar {
9+
flex: 0 0 auto;
10+
width: 280px;
11+
padding: 0;
12+
}
13+
14+
.nhsnotify-pane__main-content {
15+
display: flex;
16+
flex: 1 1 100%;
17+
flex-direction: column;
18+
min-width: 0;
19+
}
20+
21+
.nhsnotify-side-nav__list {
22+
font-size: 1em;
23+
line-height: 1.3;
24+
margin-bottom: 0;
25+
}
26+
27+
.nhsnotify-side-nav__list-section {
28+
@extend .nhsuk-u-font-weight-bold;
29+
color: #4c6272;
30+
margin-bottom: 8px;
31+
padding-bottom: 4px;
32+
font-size: 1em;
33+
}
34+
35+
.nhsnotify-side-nav__item {
36+
padding: 4px 0 0.5em 1.3em;
37+
38+
&:first-child {
39+
padding-left: 0;
40+
41+
&.nhsnotify-side-nav__item--current {
42+
left: -1.2em;
43+
padding-left: 1em;
44+
position: relative;
45+
}
46+
}
47+
}
48+
49+
.nhsnotify-side-nav__item--current {
50+
font-weight: 600;
51+
border-left: 4px solid $blue-000;
52+
padding-left: 1em;
53+
}
54+
55+
.nhsnotify-side-nav__link {
56+
text-decoration: none;
57+
58+
&:visited {
59+
color: $blue-000;
60+
}
61+
62+
&:hover {
63+
color: #7c2855;
64+
text-decoration: underline;
65+
}
66+
67+
&:focus {
68+
color: #212b32;
69+
}
70+
}

‎docs/_sass/_nhsnotify.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,15 @@
6666
@extend .nhsuk-heading-m;
6767
margin: 0;
6868
}
69+
70+
.nhsuk-header__navigation-list {
71+
justify-content: flex-start;
72+
}
73+
74+
.nhsuk-header__navigation-link {
75+
text-decoration: none;
76+
77+
&:hover {
78+
text-decoration: underline;
79+
}
80+
}

‎docs/assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
@import "../../node_modules/nhsuk-frontend/packages/nhsuk";
44
@import "nhs-colours";
55
@import "nhsnotify";
6+
@import "nhsnotify-side-nav";

‎docs/pages/features/emails.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
# Feel free to add content and custom Front Matter to this file.
3+
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
4+
5+
layout: page
6+
title: Emails
7+
nav_order: 2
8+
permalink: /features/emails
9+
section: Message channels
10+
---

‎docs/pages/features/index.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
layout: page
66
title: Features
7-
nav_order: 3
8-
has_children: true
7+
nav_order: 1
98
permalink: /features/
109
---

‎docs/pages/features/letters.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
# Feel free to add content and custom Front Matter to this file.
3+
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
4+
5+
layout: page
6+
title: Letters
7+
nav_order: 2
8+
permalink: /features/letters
9+
section: Message channels
10+
---

0 commit comments

Comments
 (0)