Skip to content

Commit 1e9401e

Browse files
edwardhorsfordedwardhorsford
authored
Upgrade secondary navigation component (#212)
1 parent da6d779 commit 1e9401e

File tree

6 files changed

+135
-119
lines changed

6 files changed

+135
-119
lines changed

‎app/assets/sass/components/_appointment-header.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,13 @@
2727
margin-bottom: 0;
2828
}
2929

30-
.app-secondary-navigation__list-item:first-of-type .app-secondary-navigation__link {
31-
padding-left: 0;
32-
}
33-
3430
.app-secondary-navigation__link {
3531
font-size: 16px;
36-
padding: 0;
37-
}
32+
padding: 8px 0;
3833

39-
.app-secondary-navigation__list-item {
40-
padding-top: 8px;
41-
padding-bottom: 8px;
34+
&:first-child {
35+
padding-left: 0;
36+
}
4237
}
4338

4439
.app-secondary-navigation__list {

‎app/assets/sass/components/_dark-mode.scss‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,46 @@ $app-dark-mode-link-visited-colour: #89b;
105105
}
106106
}
107107

108-
.app-secondary-navigation__list-item--current {
109-
border-color: $app-dark-mode-white;
108+
.app-secondary-navigation__link:visited {
109+
color: $app-dark-mode-link-visited-colour;
110+
}
111+
112+
.app-secondary-navigation__link:hover,
113+
.app-secondary-navigation__link:visited:hover {
114+
color: $app-dark-mode-link-hover-colour;
110115
}
111116

112-
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:link,
113-
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:visited {
117+
.app-secondary-navigation__link:focus,
118+
.app-secondary-navigation__link:focus:hover {
119+
color: $nhsuk-focus-text-colour !important;
120+
background-color: $nhsuk-focus-colour !important;
121+
box-shadow:
122+
0 -2px $nhsuk-focus-colour,
123+
0 $nhsuk-focus-width $nhsuk-focus-text-colour !important;
124+
outline: $nhsuk-focus-width solid transparent !important;
125+
text-decoration: none !important;
126+
}
127+
128+
.app-secondary-navigation__link[aria-current] {
114129
color: $app-dark-mode-text-colour;
130+
box-shadow: inset $nhsuk-border-width 0 $app-dark-mode-white;
131+
132+
@include nhsuk-media-query($from: tablet) {
133+
box-shadow: inset 0 ($nhsuk-border-width * -1) $app-dark-mode-white;
134+
}
135+
136+
&:hover {
137+
color: $app-dark-mode-link-hover-colour;
138+
}
139+
115140
&:focus {
116-
@include app-dark-mode-focused-text;
141+
color: $nhsuk-focus-text-colour !important;
142+
background-color: $nhsuk-focus-colour !important;
143+
box-shadow:
144+
0 -2px $nhsuk-focus-colour,
145+
0 $nhsuk-focus-width $nhsuk-focus-text-colour !important;
146+
outline: $nhsuk-focus-width solid transparent !important;
147+
text-decoration: none !important;
117148
}
118149
}
119150

‎app/assets/sass/components/_secondary-navigation-overrides.scss‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44

55
// Fix for tick SVG in secondary navigation
66
.app-secondary-navigation__link {
7-
// Ensure proper alignment when SVG is present
8-
display: inline-flex;
9-
align-items: center;
10-
gap: 10px; // 10px spacing between tick and text
7+
// gap is already set to 6px in the main component
8+
// display: flex and align-items: center also already set
119
}
1210

1311
// Style the tick SVG specifically
@@ -16,7 +14,6 @@
1614
width: 20px;
1715
height: 20px;
1816
flex-shrink: 0; // Prevent SVG from shrinking
19-
margin-right: 0; // Remove any default margin
2017

2118
// Style the tick path
2219
path {
@@ -25,9 +22,3 @@
2522
fill: none; // Stroke only, no fill
2623
}
2724
}
28-
29-
// Maintain layout for items without ticks
30-
.app-secondary-navigation__list-item {
31-
// Ensure float layout still works with flexbox links
32-
overflow: hidden;
33-
}

‎app/assets/sass/components/_secondary-navigation.scss‎

Lines changed: 54 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,57 @@
11
@use "nhsuk-frontend/dist/nhsuk/core/settings" as *;
22
@use "nhsuk-frontend/dist/nhsuk/core/tools" as *;
3-
4-
$govuk-spacing1: 5px;
5-
$govuk-spacing2: 10px;
6-
$govuk-spacing3: 15px;
7-
$govuk-spacing4: 20px;
3+
@use "nhsuk-frontend/dist/nhsuk/core/helpers" as *;
84

95
.app-secondary-navigation {
10-
@include nhsuk-responsive-margin(4, "bottom");
11-
}
6+
margin-right: #{$nhsuk-gutter-half * -1};
7+
margin-left: #{$nhsuk-gutter-half * -1};
128

13-
.app-secondary-navigation__list-item {
14-
margin: 0;
15-
}
9+
@include nhsuk-responsive-margin(5, "bottom");
1610

17-
.app-secondary-navigation__list-item--current {
18-
border-bottom-width: $govuk-spacing1;
11+
@include nhsuk-media-query($from: tablet) {
12+
margin-right: auto;
13+
margin-left: auto;
14+
}
1915
}
2016

2117
.app-secondary-navigation__link {
22-
padding-left: $govuk-spacing3;
23-
padding-right: $govuk-spacing3;
24-
}
25-
26-
// --------
18+
display: flex;
19+
align-items: center;
20+
gap: 6px;
21+
padding: nhsuk-spacing(2) $nhsuk-gutter-half;
2722

28-
.app-secondary-navigation {
29-
@include nhsuk-font($size: 19);
30-
}
23+
&:link {
24+
text-decoration: none;
25+
}
3126

32-
.app-secondary-navigation__link {
3327
@include nhsuk-link-style-default;
3428
@include nhsuk-link-style-no-visited-state;
3529

36-
&:link {
30+
@include nhsuk-media-query($from: tablet) {
31+
padding: nhsuk-spacing(3) 2px;
32+
}
33+
34+
&[aria-current] {
35+
color: $nhsuk-text-colour;
36+
box-shadow: inset $nhsuk-border-width 0 nhsuk-colour("blue");
3737
text-decoration: none;
38+
39+
@include nhsuk-media-query($from: tablet) {
40+
box-shadow: inset 0 ($nhsuk-border-width * -1) nhsuk-colour("blue");
41+
}
3842
}
3943

40-
// Extend the touch area of the link to the list
41-
&::after {
42-
bottom: 0;
43-
content: "";
44-
left: 0;
45-
position: absolute;
46-
right: 0;
47-
top: 0;
44+
&:focus {
45+
box-shadow: inset $nhsuk-focus-width 0 $nhsuk-focus-text-colour;
46+
47+
@include nhsuk-media-query($from: tablet) {
48+
box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-colour;
49+
}
50+
}
51+
52+
.nhsuk-icon {
53+
width: 1.5rem;
54+
height: 1.5rem;
4855
}
4956
}
5057

@@ -60,52 +67,32 @@ $govuk-spacing4: 20px;
6067
}
6168
}
6269

70+
.app-secondary-navigation__current {
71+
font-weight: inherit;
72+
}
73+
6374
.app-secondary-navigation__list {
64-
@include nhsuk-clearfix;
75+
display: flex;
6576

66-
// The list uses box-shadow rather than a border to set a 1px
67-
// grey line at the bottom, so that border from the current
68-
// item appears on top of the grey line.
69-
box-shadow: inset 0 -1px 0 $nhsuk-border-colour;
70-
list-style: none;
77+
flex-flow: column;
78+
79+
width: 100%;
7180
margin: 0;
7281
padding: 0;
73-
width: 100%;
74-
}
75-
76-
.app-secondary-navigation__list-item {
77-
box-sizing: border-box;
78-
display: block;
79-
float: left;
80-
margin-right: $govuk-spacing4;
81-
padding-bottom: $govuk-spacing2;
82-
padding-top: $govuk-spacing2;
83-
position: relative;
84-
85-
// More generous padding beneath items on wider screens
86-
@include nhsuk-media-query($from: tablet) {
87-
padding-bottom: $govuk-spacing3;
88-
}
89-
}
9082

91-
// The last item of the list doesn’t need any spacing to its right.
92-
// Removing this prevents the item from wrapping to the next line
93-
// unnecessarily.
94-
.app-secondary-navigation__list-item:last-child {
95-
margin-right: 0;
96-
}
83+
list-style: none;
84+
// The list uses box-shadow rather than a border to set a 1px grey line at the
85+
// bottom, so that the current item appears on top of the grey line.
86+
box-shadow: inset 0 -1px 0 $nhsuk-border-colour;
9787

98-
.app-secondary-navigation__list-item--current {
99-
border-bottom: $nhsuk-border-width solid $nhsuk-brand-colour;
100-
padding-bottom: $govuk-spacing1;
88+
@include nhsuk-font(19);
10189

102-
// More generous padding beneath items on wider screens
10390
@include nhsuk-media-query($from: tablet) {
104-
padding-bottom: $govuk-spacing2;
91+
flex-flow: row wrap;
92+
gap: nhsuk-spacing(2) nhsuk-spacing(5);
10593
}
10694
}
10795

108-
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:link,
109-
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:visited {
110-
color: $nhsuk-text-colour;
96+
.app-secondary-navigation__list-item {
97+
margin-bottom: 0;
11198
}

‎app/views/_components/secondary-navigation/template.njk‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
<nav class="app-secondary-navigation {%- if params.classes %} {{ params.classes }}{% endif -%}" {% if params.labelledBy %}aria-labelledby="{{ params.labelledBy }}"{% else %}aria-label="{{ params.visuallyHiddenTitle or "Secondary menu" }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
1+
{%- from "nhsuk/macros/attributes.njk" import nhsukAttributes -%}
2+
<nav class="app-secondary-navigation {%- if params.classes %} {{ params.classes }}{% endif -%}" {% if params.labelledBy %}aria-labelledby="{{ params.labelledBy }}"{% else %}aria-label="{{ params.visuallyHiddenTitle or "Secondary menu" }}"{% endif %} {{- nhsukAttributes(params.attributes) }}>
23
<ul class="app-secondary-navigation__list">
34
{% for item in params.items %}
45
{% if item %}
5-
<li class="app-secondary-navigation__list-item {{ "app-secondary-navigation__list-item--current" if item.current }}{% if item.classes %} {{ item.classes }}{% endif -%}">
6+
<li class="app-secondary-navigation__list-item{% if item.classes %} {{ item.classes }}{% endif -%}">
67
{% if item.html %}
78
{{ item.html | safe }}
89
{% else %}
910
{% if not item.disabled %}
10-
<a class="app-secondary-navigation__link" href="{{ item.href }}" {{ "aria-current=page" if item.current }}>
11-
{{ item.text | safe }}
11+
<a class="app-secondary-navigation__link" href="{{ item.href }}" {{ 'aria-current="page"' if item.current }}>
12+
{%- if item.active or item.current -%}
13+
<strong class="app-secondary-navigation__current">{{ item.text | safe }}</strong>
14+
{%- else -%}
15+
{{- item.text | safe -}}
16+
{%- endif -%}
1217
</a>
1318
{% else %}
1419
<span class="app-secondary-navigation__link app-secondary-navigation__link--disabled">

0 commit comments

Comments
 (0)