From e18879588a8a10b5769a91db9e4a2fd1b8e7467a Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 15:35:18 +0100 Subject: [PATCH 1/3] Add native header mock --- app/assets/javascript/native-header.js | 16 +++++ app/assets/sass/main.scss | 3 + app/assets/sass/native-header.scss | 58 ++++++++++++++++++ app/views/_includes/native-header.html | 13 +++++ app/views/layout.html | 81 ++++++++++++++------------ 5 files changed, 133 insertions(+), 38 deletions(-) create mode 100644 app/assets/javascript/native-header.js create mode 100644 app/assets/sass/native-header.scss create mode 100644 app/views/_includes/native-header.html diff --git a/app/assets/javascript/native-header.js b/app/assets/javascript/native-header.js new file mode 100644 index 0000000..1a60273 --- /dev/null +++ b/app/assets/javascript/native-header.js @@ -0,0 +1,16 @@ +class NativeHeader { + static moduleName = 'app-native-header' + + constructor($root) { + this.$root = $root + window.addEventListener('scroll', this.onScroll.bind(this), { passive: true }) + } + + onScroll() { + this.$root.classList.toggle('stuck', window.scrollY > 0) + } +} + +document.querySelectorAll(`[data-module="${NativeHeader.moduleName}"]`).forEach(($root) => { + new NativeHeader($root) +}) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 73a44a4..30ba927 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -4,4 +4,7 @@ $nhsuk-assets-path: "/nhsuk-frontend/assets/"; @import "nhsuk-frontend/dist/nhsuk"; @import "nhsapp-frontend/dist/nhsapp"; +// Add styles for components which mock the native app +@import "native-header"; + // Add your custom CSS/Sass styles below. diff --git a/app/assets/sass/native-header.scss b/app/assets/sass/native-header.scss new file mode 100644 index 0000000..088f0eb --- /dev/null +++ b/app/assets/sass/native-header.scss @@ -0,0 +1,58 @@ + +//// +/// Mocks up the fixed navigation header shown in the NHS App native wrapper, +/// allowing prototype screens to be previewed in context. +/// +/// @group components/native-header +//// + +.app-native-header { + -webkit-tap-highlight-color: transparent; + background-color: $nhsuk-body-background-colour; + padding: nhsuk-spacing(2) 0; + position: sticky; + top: 0; + transition: background-color 0.2s ease; + width: 100%; + z-index: 1; + + &.stuck { + background-color: nhsuk-tint($nhsuk-body-background-colour, 60%); + border-bottom: $nhsuk-border-width-form-element solid rgba($nhsuk-text-colour, 0.1); + } +} + +.app-native-header__inner { + align-items: center; + display: flex; + justify-content: space-between; +} + +.app-native-header__help-link { + @include nhsuk-font-size(16); + + border: $nhsuk-border-width-form-element solid $nhsuk-border-colour; + border-radius: nhsuk-spacing(2); + color: $nhsuk-link-colour; + display: block; + font-weight: $nhsuk-font-weight-bold; + padding: nhsuk-spacing(1) nhsuk-spacing(2); + text-decoration: none; + + &:hover, + &:visited { + color: $nhsuk-link-colour; + } + + &:active { + opacity: 0.5; + } +} + +.app-native-header__logo { + padding: nhsuk-spacing(2) 0; + + &:active { + opacity: 0.5; + } +} \ No newline at end of file diff --git a/app/views/_includes/native-header.html b/app/views/_includes/native-header.html new file mode 100644 index 0000000..e7bbfd9 --- /dev/null +++ b/app/views/_includes/native-header.html @@ -0,0 +1,13 @@ +
+
+ + App help +
+
\ No newline at end of file diff --git a/app/views/layout.html b/app/views/layout.html index ed12c1a..7fa453e 100755 --- a/app/views/layout.html +++ b/app/views/layout.html @@ -28,44 +28,48 @@ {% endblock %} {% block header %} - {{ header({ - service: { - text: "App", - href: "/" - }, - account: { - classes: "nhsapp-u-hide-until-tablet", - items: [ - { - text: "App help", - href: "#" - }, - { - text: "Log out", - href: "#" - } - ] - }, - navigation: { - items: [ - { - href: "/", - text: "Home", - current: (section == "Home") - }, - { - href: "/messages", - text: "Messages", - current: (section == "Messages") - }, - { - href: "/profile", - text: "Profile", - current: (section == "Profile") - } - ] - } - }) }} + {% if data.web === 'yes' %} + {{ header({ + service: { + text: "App", + href: "/" + }, + account: { + classes: "nhsapp-u-hide-until-tablet", + items: [ + { + text: "App help", + href: "#" + }, + { + text: "Log out", + href: "#" + } + ] + }, + navigation: { + items: [ + { + href: "/", + text: "Home", + current: (section == "Home") + }, + { + href: "/messages", + text: "Messages", + current: (section == "Messages") + }, + { + href: "/profile", + text: "Profile", + current: (section == "Profile") + } + ] + } + }) }} + {% else %} + {% include "_includes/native-header.html" %} + {% endif %} {% endblock %} {% block footer %} @@ -88,5 +92,6 @@ {% block bodyEnd %} {{ super() }} + {% block pageScripts %}{% endblock %} {% endblock %} From 7b25f7281fa1c8f2b4ec3bff4f0c0ab38b0aa6fb Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 15:41:50 +0100 Subject: [PATCH 2/3] Move web header into include --- app/views/_includes/web-header.html | 38 +++++++++++++++++++++++++ app/views/layout.html | 43 +---------------------------- 2 files changed, 39 insertions(+), 42 deletions(-) create mode 100644 app/views/_includes/web-header.html diff --git a/app/views/_includes/web-header.html b/app/views/_includes/web-header.html new file mode 100644 index 0000000..3083aa2 --- /dev/null +++ b/app/views/_includes/web-header.html @@ -0,0 +1,38 @@ +{{ header({ + service: { + text: "App", + href: "/" + }, + account: { + classes: "nhsapp-u-hide-until-tablet", + items: [ + { + text: "App help", + href: "#" + }, + { + text: "Log out", + href: "#" + } + ] + }, + navigation: { + items: [ + { + href: "/", + text: "Home", + current: (section == "Home") + }, + { + href: "/messages", + text: "Messages", + current: (section == "Messages") + }, + { + href: "/profile", + text: "Profile", + current: (section == "Profile") + } + ] + } +}) }} diff --git a/app/views/layout.html b/app/views/layout.html index 7fa453e..1a22562 100755 --- a/app/views/layout.html +++ b/app/views/layout.html @@ -28,48 +28,7 @@ {% endblock %} {% block header %} - {% if data.web === 'yes' %} - {{ header({ - service: { - text: "App", - href: "/" - }, - account: { - classes: "nhsapp-u-hide-until-tablet", - items: [ - { - text: "App help", - href: "#" - }, - { - text: "Log out", - href: "#" - } - ] - }, - navigation: { - items: [ - { - href: "/", - text: "Home", - current: (section == "Home") - }, - { - href: "/messages", - text: "Messages", - current: (section == "Messages") - }, - { - href: "/profile", - text: "Profile", - current: (section == "Profile") - } - ] - } - }) }} - {% else %} - {% include "_includes/native-header.html" %} - {% endif %} + {% include "_includes/" + ("web" if data.web and data.web !== 'no' else "native") + "-header.html" %} {% endblock %} {% block footer %} From 4846bbd2c00319070ab8e2e555044ae7061f54e5 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 27 Aug 2026 15:41:56 +0100 Subject: [PATCH 3/3] Change link to # --- app/views/_includes/native-header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/_includes/native-header.html b/app/views/_includes/native-header.html index e7bbfd9..234ec80 100644 --- a/app/views/_includes/native-header.html +++ b/app/views/_includes/native-header.html @@ -8,6 +8,6 @@ Home - App help + App help \ No newline at end of file