add hub logic to mobile examples

nhsuk · Jan 22, 2025 · 345cc42 · 345cc42
1 parent 3773e2b
commit 345cc42
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -88,7 +88,8 @@ export default function (eleventyConfig) {
       figmaLink: data.figmaLink,
       vueLink: data.vueLink,
       mobile: data.mobile,
-      mobileHeader: data.mobileHeader
+      mobileHeader: data.mobileHeader,
+      hub: data.hub
     }
     return nunjucksEnv.render('example.njk', templateData)
   })

diff --git a/docs/_includes/layouts/partials/bottom-nav-native.njk b/docs/_includes/layouts/partials/bottom-nav-native.njk
@@ -4,26 +4,50 @@
       <ul class="app-bottom-nav-native__list">
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('home') }}
-            <span class="app-bottom-nav-native__label ">Home</span>
+            {% if hub === "Home" %}
+              {{ nhsappIcon('homeFilled') }}
+            {% else %}
+              {{ nhsappIcon('home') }}
+            {% endif %}
+            <span class="app-bottom-nav-native__label{% if hub === 'Home' %} app-bottom-nav-native__label--active{% endif %}">Home</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('crossFilled') }}    
-            <span class="app-bottom-nav-native__label app-bottom-nav-native__label--active">Services</span>
+            {% if hub === "Services" %}
+              {{ nhsappIcon('crossFilled') }}
+            {% else %}
+              {{ nhsappIcon('cross') }}
+            {% endif %}        
+            <span class="app-bottom-nav-native__label{% if hub === 'Services' %} app-bottom-nav-native__label--active{% endif %}">Services</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('heart') }}
-            <span class="app-bottom-nav-native__label ">Your health</span>
+            {% if hub === "Your health" %}
+              {{ nhsappIcon('heartFilled') }}
+            {% else %}
+              {{ nhsappIcon('heart') }}
+            {% endif %} 
+            <span class="app-bottom-nav-native__label{% if hub === 'Your health' %} app-bottom-nav-native__label--active{% endif %}">Your health</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('messages') }}
-            <span class="app-bottom-nav-native__label ">Messages</span>
+            {% if hub === "Messages" %}
+              {% if data['messages'] > 0 %}
+                {{ nhsappIcon('messagesUnreadFilled') }}
+              {% else %}
+                {{ nhsappIcon('messagesFilled') }}
+              {% endif %}
+            {% else %}
+              {% if data['messages'] > 0 %}
+                {{ nhsappIcon('messagesUnread') }}
+              {% else %}
+                {{ nhsappIcon('messages') }}
+              {% endif %}
+            {% endif %}
+            <span class="app-bottom-nav-native__label{% if hub === 'Messages' %} app-bottom-nav-native__label--active{% endif %}">Messages</span>
           </a>
         </li>
       </ul>

diff --git a/docs/examples/error-pages/problem-with-service.njk b/docs/examples/error-pages/problem-with-service.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/example-full-page-mobile.njk
 mobile: true
+hub: Services
 title: Problem with services
 figmaLink: 
 vueLink: 

diff --git a/docs/examples/hub-pages/services.njk b/docs/examples/hub-pages/services.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/example-full-page-mobile.njk
 mobile: true
+hub: Services
 title: Services
 figmaLink: 
 vueLink: 

diff --git a/docs/examples/hub-pages/your-health.njk b/docs/examples/hub-pages/your-health.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/example-full-page-mobile.njk
 mobile: true
+hub: Your health
 title: Your health
 figmaLink: 
 vueLink: