Merge pull request #514 from City-of-Helsinki/UHF-7609_global_nav_inject

UHF-7609 global nav inject

src/js/nav-global/menu.js

@@ -70,6 +70,14 @@ function isInPath() {
   return !!this.inPath;
 }
 
+/**
+ * Convert null `is_injected` values to boolean for mustache templates to avoid using parent values
+ * @return {boolean} does current object have is_injected set and trueish
+ */
+function isInjected() {
+  return !!this.is_injected;
+}
+
 /** *
  * Convert attributes to to template-friendly object
  * @return {object}  {external:bool, protocol:bool}
@@ -191,7 +199,7 @@ const MobilePanel = {
     <ul class="mmenu__items">
       {{#sub_tree}}
         <li class="mmenu__item">
-          <a href="{{url}}" class="mmenu__item-link{{#isInPath}} mmenu__item-link--in-path{{/isInPath}}"{{#isActive}} aria-current="page"{{/isActive}}
+          <a href="{{url}}" class="mmenu__item-link{{#isInPath}} mmenu__item-link--in-path{{/isInPath}}{{#isInjected}} mmenu__item-link--injected{{/isInjected}}"{{#isActive}} aria-current="page"{{/isActive}}
           {{#externalLinkAttributes.external}}
             data-external="true"
           {{/externalLinkAttributes.external}}
@@ -285,6 +293,7 @@ const MobilePanel = {
       button,
       isActive,
       isInPath,
+      isInjected,
       externalLinkAttributes,
       hasLang,
       externalLinkIcon,

src/scss/06_components/navigation/global/_menu-toggle.scss

@@ -3,7 +3,7 @@ $-default-label-icon-size: 32px;
 $label-font: 'special.navigation.icon_label';
 
 // When menu is opened with anchor instead of JS, this forces the page to scroll to top
-.nav-toggle-target:not([data-js]) {
+#menu:not([data-js]) {
   scroll-margin-top: 100vh;
 }
 
@@ -237,7 +237,7 @@ $label-font: 'special.navigation.icon_label';
 }
 
 // When JS is enabled, switch to use button instead of anchor
-.nav-toggle-target[data-js] ~ * {
+#menu[data-js] ~ * {
   .nav-toggle__anchor {
     display: none;
   }
@@ -258,7 +258,7 @@ $label-font: 'special.navigation.icon_label';
   }
 }
 
-.nav-toggle-target:not([data-js]) ~ * {
+#menu:not([data-js]) ~ * {
   // Chrome browser has a bug that renders initial menu state as open on page load and then animates it close.
   // For this reason I had to remove the closing animation when there is no js available :(
   .nav-toggle-dropdown__wrapper,

src/scss/06_components/navigation/global/_mmenu.scss

@@ -256,6 +256,11 @@ $-footerlink-target-size: 44px;
   font-weight: $font-weight-bold;
 }
 
+.mmenu__item-link--injected,
+.mmenu__item-link--injected + .mmenu__forward {
+  background: $color-black-5;
+}
+
 .mmenu__forward {
   align-items: center;
   background: none;