Add native bottom navigation mock

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.

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

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 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
   //

app/views/_includes/native-bottom-navigation.html

@@ -0,0 +1,34 @@
+{% from "nhsapp/styles/icon/macro.njk" import nhsappIcon %}
+<nav class="app-native-bottom-navigation">
+  <div class="nhsuk-width-container">
+    <ul class="app-native-bottom-navigation__list">
+      <li class="app-native-bottom-navigation__item">
+        <a class="app-native-bottom-navigation__link" href="/">
+          {{ nhsappIcon('homeFilled' if section === 'Home' else 'home') }}
+          <span class="app-native-bottom-navigation__label {% if section === 'Home' %}app-native-bottom-navigation__label--active{% endif %}">Home</span>
+        </a>
+      </li>
+      <li class="app-native-bottom-navigation__item">
+        <a class="app-native-bottom-navigation__link" href="/messages">
+          {% if section === 'Messages' and unreadMessages() %}
+            {% set messagesIcon = 'messagesUnreadFilled' %}
+          {% elif section === 'Messages' %}
+            {% set messagesIcon = 'messagesFilled' %}
+          {% elif unreadMessages() %}
+            {% set messagesIcon = 'messagesUnread' %}
+          {% else %}
+            {% set messagesIcon = 'messages' %}
+          {% endif %}
+          {{ nhsappIcon(messagesIcon) }}
+          <span class="app-native-bottom-navigation__label {% if section === 'Messages' %}app-native-bottom-navigation__label--active{% endif %}">Messages</span>
+        </a>
+      </li>
+      <li class="app-native-bottom-navigation__item">
+        <a class="app-native-bottom-navigation__link" href="/profile">
+          {{ nhsappIcon('accountFilled' if section === 'Profile' else 'account') }}
+          <span class="app-native-bottom-navigation__label {% if section === 'Profile' %}app-native-bottom-navigation__label--active{% endif %}">Profile</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>

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

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 %}