From 646351bff6b525b1dd9f8cd5f81ac4ee7ea57121 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 16:56:47 +0100 Subject: [PATCH 1/3] Add native bottom navigation mock --- app/assets/sass/main.scss | 1 + app/assets/sass/native-bottom-navigation.scss | 63 +++++++++++++++++++ app/locals.js | 3 + .../_includes/native-bottom-navigation.html | 36 +++++++++++ app/views/_includes/web-footer.html | 14 +++++ app/views/layout.html | 15 +---- 6 files changed, 118 insertions(+), 14 deletions(-) create mode 100644 app/assets/sass/native-bottom-navigation.scss create mode 100644 app/views/_includes/native-bottom-navigation.html create mode 100644 app/views/_includes/web-footer.html diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 30ba927..6f220dd 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -6,5 +6,6 @@ $nhsuk-assets-path: "/nhsuk-frontend/assets/"; // Add styles for components which mock the native app @import "native-header"; +@import "native-bottom-navigation"; // Add your custom CSS/Sass styles below. diff --git a/app/assets/sass/native-bottom-navigation.scss b/app/assets/sass/native-bottom-navigation.scss new file mode 100644 index 0000000..25613e6 --- /dev/null +++ b/app/assets/sass/native-bottom-navigation.scss @@ -0,0 +1,63 @@ +//// +/// Mocks up the native app bottom navigation shown at the bottom of the screen. +/// +/// @group components/native-bottom-navigation +//// + +body:has(.app-native-bottom-navigation) { + padding-bottom: 88px; // link padding (12+20) + icon (28) + gap (8) + label (12) + bottom navigation padding-bottom (8) +} + +.app-native-bottom-navigation { + background-color: $nhsuk-brand-colour; + bottom: 0; + display: block; + left: 0; + padding-bottom: nhsuk-spacing(2); + position: fixed; + width: 100%; +} + +.app-native-bottom-navigation__list { + display: flex; + gap: nhsuk-spacing(1); + list-style: none; + margin: 0; + padding: 0 10px; + width: 100%; +} + +.app-native-bottom-navigation__item { + line-height: 1; + flex: 1; + margin: 0; + padding: 0; +} + +.app-native-bottom-navigation__link { + align-items: center; + display: flex; + flex-direction: column; + gap: nhsuk-spacing(2); + padding: 12px 0 20px; + text-decoration: none; + + .nhsapp-icon { + fill: $nhsuk-reverse-text-colour; + height: 28px; + width: 28px; + } +} + +.app-native-bottom-navigation__label { + color: $nhsuk-reverse-text-colour; + font-size: 12px; + + @include nhsuk-media-query($from: tablet) { + font-size: 16px; + } +} + +.app-native-bottom-navigation__label--active { + font-weight: $nhsuk-font-weight-bold; +} \ No newline at end of file diff --git a/app/locals.js b/app/locals.js index 873beda..7bffff3 100644 --- a/app/locals.js +++ b/app/locals.js @@ -5,6 +5,9 @@ module.exports = function(req, res, next) { // Add the version of the NHS app frontend being used res.locals.nhsappFrontendVersion = `v${nhsappFrontendPkg.version}` + // Used to show the unread messages badge in the bottom navigation + res.locals.unreadMessages = () => req.session.data.messages?.some((message) => message.read === false) + // You can set any additional local variables here. // These will be made available to any views // diff --git a/app/views/_includes/native-bottom-navigation.html b/app/views/_includes/native-bottom-navigation.html new file mode 100644 index 0000000..c9d1326 --- /dev/null +++ b/app/views/_includes/native-bottom-navigation.html @@ -0,0 +1,36 @@ +{% from "nhsapp/styles/icon/macro.njk" import nhsappIcon %} + diff --git a/app/views/_includes/web-footer.html b/app/views/_includes/web-footer.html new file mode 100644 index 0000000..75d92b1 --- /dev/null +++ b/app/views/_includes/web-footer.html @@ -0,0 +1,14 @@ +{{ footer({ + meta: { + items: [ + { + href: "/", + text: "Home" + }, + { + href: "/prototype-admin/reset?returnPage=" + (currentPage | urlencode), + text: "Reset data" + } + ] + } +}) }} diff --git a/app/views/layout.html b/app/views/layout.html index 1a22562..b5021c0 100755 --- a/app/views/layout.html +++ b/app/views/layout.html @@ -32,20 +32,7 @@ {% endblock %} {% block footer %} - {{ footer({ - meta: { - items: [ - { - href: "/", - text: "Home" - }, - { - href: "/prototype-admin/reset?returnPage=" + (currentPage | urlencode), - text: "Reset data" - } - ] - } - }) }} + {% include "_includes/" + ("web-footer" if data.web and data.web !== 'no' else "native-bottom-navigation") + ".html" %} {% endblock %} {% block bodyEnd %} From 7af9028ce25c29b2c182be118a14e7c707fb3d86 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 17:27:35 +0100 Subject: [PATCH 2/3] Remove redundant div --- .../_includes/native-bottom-navigation.html | 60 +++++++++---------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/app/views/_includes/native-bottom-navigation.html b/app/views/_includes/native-bottom-navigation.html index c9d1326..4d99325 100644 --- a/app/views/_includes/native-bottom-navigation.html +++ b/app/views/_includes/native-bottom-navigation.html @@ -1,36 +1,34 @@ {% from "nhsapp/styles/icon/macro.njk" import nhsappIcon %} From 21dff2a248f01bd1980423888aaa75b841d6dc8a Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 17:30:35 +0100 Subject: [PATCH 3/3] coerce to boolean --- app/locals.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/locals.js b/app/locals.js index 7bffff3..8842c78 100644 --- a/app/locals.js +++ b/app/locals.js @@ -5,8 +5,8 @@ module.exports = function(req, res, next) { // Add the version of the NHS app frontend being used res.locals.nhsappFrontendVersion = `v${nhsappFrontendPkg.version}` - // Used to show the unread messages badge in the bottom navigation - res.locals.unreadMessages = () => req.session.data.messages?.some((message) => message.read === false) + // Used to select the icon state in the bottom navigation + res.locals.unreadMessages = () => Boolean(req.session.data.messages?.some((message) => message.read === false)) // You can set any additional local variables here. // These will be made available to any views