Add native header

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)
+})

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.

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;
+  }
+}

app/views/_includes/native-header.html

@@ -0,0 +1,13 @@
+<header class="app-native-header" data-module="app-native-header">
+  <div class="nhsuk-width-container app-native-header__inner">
+    <a class="app-native-header__logo" href="/">
+      <svg class="nhsuk-logo nhsuk-u-display-block" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 40 16" height="28" width="69" aria-describedby="nhs-logo-title" role="img">
+        <title id="nhs-logo-title">NHS</title>
+        <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+        <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+      </svg>
+      <span class="nhsuk-u-visually-hidden">Home</span>
+    </a>
+    <a class="app-native-header__help-link" href="#">App help</a>
+  </div>
+</header>

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")
+      }
+    ]
+  }
+}) }}

app/views/layout.html

@@ -28,44 +28,7 @@
 {% 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")
-        }
-      ]
-    }
-  }) }}
+  {% include "_includes/" + ("web" if data.web and data.web !== 'no' else "native") + "-header.html" %}
 {% endblock %}
 
 {% block footer %}
@@ -88,5 +51,6 @@
 {% block bodyEnd %}
   {{ super() }}
   <script type="module" src="/assets/javascript/main.js"></script>
+  <script type="module" src="/assets/javascript/native-header.js"></script>
   {% block pageScripts %}{% endblock %}
 {% endblock %}