@ons/design-system 48.0.1 → 49.0.0

package/components/button/_button.scss

@@ -379,7 +379,7 @@ $button-shadow-size: 3px;
       transform: rotate(90deg);
     }
 
-    @include mq(m) {
+    @include mq(l) {
       display: none;
     }
   }
@@ -393,4 +393,41 @@ $button-shadow-size: 3px;
       opacity: 0.4;
     }
   }
+
+  &--dropdown {
+    @extend .ons-btn--ghost;
+    @extend .ons-btn--mobile;
+
+    width: 100%;
+
+    .ons-btn__inner {
+      background: $color-branded-tint;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      color: $color-text-link;
+      display: block;
+      font-size: 1rem;
+      font-weight: normal;
+      padding: 0.6rem 1rem;
+      text-align: left;
+
+      .ons-svg-icon {
+        fill: $color-text-link;
+        float: right;
+        margin-top: 3px;
+      }
+    }
+
+    &:active,
+    &:active:focus {
+      .ons-btn__inner {
+        background: $color-branded-secondary;
+        color: $color-white;
+        .ons-svg-icon {
+          fill: $color-white;
+        }
+      }
+    }
+  }
 }

package/components/header/_header.scss

@@ -170,20 +170,41 @@
     display: block;
   }
 
-  &__bottom {
-    background: $color-header;
-    margin-top: -0.03rem;
-  }
+  &-service-nav {
+    display: inline-block;
 
-  &-search {
-    padding: 1rem;
+    &--mobile {
+      background: $color-branded-tint;
+      padding: 1rem;
+      width: 100%;
+    }
 
-    @include mq(m) {
-      bottom: 65px;
+    &__list {
+      list-style: none;
+      margin: 0;
       padding: 0;
-      position: absolute;
-      right: 1rem;
-      width: 20rem;
+    }
+
+    &__item {
+      display: inline-block;
+      margin: 0 0 0 1rem;
+      &--mobile {
+        display: block;
+        margin: 0 0 0.5rem;
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .ons-language-links {
+      border-top: 1px solid $color-branded;
+      margin: 1.5rem 0 0;
+      padding: 1rem 0 0;
+
+      &__item {
+        margin: 0 0 0.5rem;
+      }
     }
   }
 }

package/components/header/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsHeader(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icons/_macro.njk" import onsIcon %}
-    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
+    {% from "components/navigation/_macro.njk" import onsNavigation %}
 
     {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
     {% set currentLanguageISOCode = "en" %}
@@ -82,12 +82,13 @@
                                     {% endif %}
                                     <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                         {{ onsButton({
-                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu") ,
+                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                             "classes": "ons-u-d-no ons-js-toggle-services",
+                                            "type": "button",
                                             "buttonStyle": "mobile",
                                             "variants": buttonVariant,
                                             "attributes": {
-                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu") ,
+                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                 "aria-controls": params.serviceLinks.id,
                                                 "aria-haspopup": "true",
                                                 "aria-expanded": "false"
@@ -144,7 +145,7 @@
                         {% endif %}
                     </div>
                     {% if params.button is defined and params.button %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
+                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                             {{ onsButton({
                                 "text": params.button.text,
                                 "classes": "ons-u-d-no@xxs@m",
@@ -157,9 +158,9 @@
                             }) }}
                         </div>
                     {% endif %}
-                    {% if params.navigation is defined and params.navigation and params.navigation.toggleButton is defined and params.navigation.toggleButton or params.autosuggest is defined and params.autosuggest %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
-                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
+                    {% if params.navigation is defined %}
+                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
+                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                 <span class="ons-grid ons-u-d-no@xxs@xs">
                                     {{ onsButton({
                                         "text": "Search",
@@ -168,22 +169,22 @@
                                         "iconType": "search",
                                         "iconPosition": "only",
                                         "attributes": {
-                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
-                                            "aria-controls": params.navigation.id,
+                                            "aria-label": "Toggle search" ,
+                                            "aria-controls": "ons-site-search",
                                             "aria-haspopup": "true",
                                             "aria-expanded": "false"
                                         }
                                     }) }}
                                 </span>
                             {% endif %}
-                            {% if params.navigation.toggleButton is defined and params.navigation.toggleButton %}
+                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                 {{ onsButton({
-                                    "text": params.navigation.toggleButton.text | default("Menu"),
-                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
+                                    "text": params.navigation.toggleNavigationButton.text,
+                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                     "buttonStyle": "mobile",
                                     "variants": ["mobile", "ghost"],
                                     "attributes": {
-                                        "aria-label": params.navigation.toggleButton.ariaLabel | default("Toggle menu") ,
+                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                         "aria-controls": params.navigation.id,
                                         "aria-haspopup": "true",
                                         "aria-expanded": "false"
@@ -196,47 +197,7 @@
             </div>
         </div>
         {% if params.navigation is defined and params.navigation %}
-            <div class="ons-header__bottom">
-                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
-                        <div class="ons-header-search ons-js-header-search">
-                            {{ onsAutosuggest({
-                                "id": "ons-autosuggest-header-search",
-                                "containerClasses": "ons-autosuggest-input--header",
-                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
-                                "label": {
-                                    "text": params.autosuggest.label,
-                                    "id": "ons-autosuggest-header-search-label",
-                                    "classes": "ons-label--white ons-u-pl-m"
-                                },
-                                "accessiblePlaceholder": true,
-                                "autocomplete": "off",
-                                "instructions": params.autosuggest.instructions,
-                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
-                                "ariaMinChars": params.autosuggest.ariaMinChars,
-                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
-                                "ariaOneResult": params.autosuggest.ariaOneResult,
-                                "ariaNResults": params.autosuggest.ariaNResults,
-                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
-                                "moreResults": params.autosuggest.moreResults,
-                                "resultsTitle": params.autosuggest.resultsTitle,
-                                "autosuggestData": params.autosuggest.autosuggestData,
-                                "noResults": params.autosuggest.noResults,
-                                "typeMore": params.autosuggest.typeMore
-                            }) }}
-                        </div>
-                    {% endif %}
-                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
-                        <ul class="ons-header-nav__list">
-                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
-                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                                    <a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </nav>
-                </div>
-            </div>
+            {{ onsNavigation(params.navigation) }}
         {% endif %}
     </header>
 {% endmacro %}

package/components/modal/_macro.njk

@@ -5,19 +5,21 @@
         role="dialog"
         aria-labelledby="ons-modal-title"
         {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
-    >
-        <h1 id="ons-modal-title" class="ons-modal__title">
-            {{ params.title }}
-        </h1>
-        <div class="ons-modal__body">
-            {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+    >   
+        <div class="ons-modal__content">
+            <h1 id="ons-modal-title" class="ons-modal__title">
+                {{ params.title }}
+            </h1>
+            <div class="ons-modal__body">
+                {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+            </div>
+            {% if params.btnText %}
+                {% from "components/button/_macro.njk" import onsButton %}
+                {{ onsButton({
+                    "text": params.btnText,
+                    "classes": "ons-js-modal-btn ons-u-mt-s"
+                }) }}
+            {% endif %}
         </div>
-        {% if params.btnText %}
-            {% from "components/button/_macro.njk" import onsButton %}
-            {{ onsButton({
-                "text": params.btnText,
-                "classes": "ons-js-modal-btn ons-u-mt-s"
-            }) }}
-        {% endif %}
     </dialog>
 {% endmacro %}

package/components/modal/_modal.scss

@@ -9,8 +9,20 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   margin-right: 2rem;
   max-width: 500px;
   padding: 2rem;
+  position: relative;
   width: auto;
 
+  &-ie11 & {
+    background: $color-white;
+    bottom: 0;
+    height: 350px;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
   @media screen and (min-width: 600px) {
     margin-left: auto;
     margin-right: auto;
@@ -24,6 +36,11 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
 
   & + .backdrop {
     background: $backdrop-colour;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
   }
 }
 

package/components/modal/modal.js

@@ -1,6 +1,7 @@
 import dialogPolyfill from 'dialog-polyfill';
 
 const overLayClass = 'ons-modal-overlay';
+const ie11Class = 'ons-modal-ie11';
 
 export default class Modal {
   constructor(component) {
@@ -8,7 +9,7 @@ export default class Modal {
     this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
     this.closeButton = component.querySelector('.ons-js-modal-btn');
     this.lastFocusedEl = null;
-
+    this.dialogCSSSupported = true;
     this.initialise();
   }
 
@@ -33,6 +34,7 @@ export default class Modal {
     } else {
       try {
         dialogPolyfill.registerDialog(this.component);
+        this.dialogCSSSupported = false;
         return true;
       } catch (error) {
         /* istanbul ignore next */
@@ -44,9 +46,15 @@ export default class Modal {
   openDialog(event) {
     if (!this.isDialogOpen()) {
       this.component.classList.add('ons-u-db');
-      document.querySelector('body').className += ' ' + overLayClass;
+      document.querySelector('body').classList.add(overLayClass);
+
+      if (!this.dialogCSSSupported) {
+        document.querySelector('body').classList.add(ie11Class);
+      }
+
       this.makePageContentInert();
       this.saveLastFocusedEl();
+
       if (event) {
         const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
         modal.showModal();
@@ -96,6 +104,11 @@ export default class Modal {
       }
       this.component.classList.remove('ons-u-db');
       document.querySelector('body').classList.remove(overLayClass);
+
+      if (!this.dialogCSSSupported) {
+        document.querySelector('body').classList.remove(ie11Class);
+      }
+
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
       this.removeInertFromPageContent();

package/components/navigation/_macro.njk

@@ -0,0 +1,98 @@
+{% macro onsNavigation(params) %}
+    {% from "components/button/_macro.njk" import onsButton %}
+    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
+    <div class="ons-navigation-wrapper">
+        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+            {% if params.siteSearchAutosuggest is defined and params.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
+                <div class="ons-navigation-search ons-js-navigation-search">
+                    {{ onsAutosuggest({
+                        "id": "ons-site-search",
+                        "containerClasses": "ons-autosuggest-input--header",
+                        "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
+                        "label": {
+                            "text": params.siteSearchAutosuggest.label,
+                            "id": "ons-site-search-label",
+                            "classes": "ons-label--white ons-u-pl-m"
+                        },
+                        "accessiblePlaceholder": true,
+                        "autocomplete": "off",
+                        "instructions": params.siteSearchAutosuggest.instructions,
+                        "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
+                        "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
+                        "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
+                        "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
+                        "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
+                        "moreResults": params.siteSearchAutosuggest.moreResults,
+                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
+                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
+                        "noResults": params.siteSearchAutosuggest.noResults,
+                        "typeMore": params.siteSearchAutosuggest.typeMore
+                    }) }}
+                </div>
+            {% endif %}
+            <nav class="ons-navigation ons-js-navigation" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+                <ul class="ons-navigation__list">
+                    {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.currentPath) or (item.url != (params.siteBasePath | default('/')) and item.url in params.currentPath) }}">
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
+    </div>
+    {% if params.subNavigation is defined and params.subNavigation %}
+        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}" id="{{ params.subNavigation.id }}" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                <ul class="ons-navigation__list ons-navigation__list">
+                    {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
+                        <li class="ons-navigation__item ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </nav>
+        <div class="ons-u-d-no@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}">
+            {{ onsButton({
+                "text": params.currentPageTitle,
+                "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
+                "buttonStyle": "mobile",
+                "attributes": {
+                    "aria-label": "Toggle section navigation",
+                    "aria-controls": params.subNavigation.id,
+                    "aria-haspopup": "true",
+                    "aria-expanded": "false"
+                }
+            }) }}
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no proto-ons-js-secondary-nav ons-u-mt-xs" id="{{ params.subNavigation.id }}" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                    <ul class="ons-navigation__list">
+                        <li class="ons-navigation__item">
+                            <a class="ons-navigation__link" href="{{ params.subNavigation.overviewURL }}">{{ params.subNavigation.overviewText | default('Overview') }}</a>
+                        </li>
+                        {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
+                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                                {% if item.sections %}
+                                    {% for section in item.sections %}
+                                        {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
+                                        <ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                            {% for child in section.children %}
+                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.subNavigation.currentPath) or (child.url != (params.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.subNavigation.currentPath) }}">
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    {% endfor %}
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </nav>
+        </div>
+    {% endif %}
+
+{% endmacro %}

package/components/navigation/_navigation.scss

@@ -0,0 +1,127 @@
+.ons-navigation {
+  position: relative;
+  &-wrapper {
+    background: $color-header;
+    margin-top: -0.03rem;
+  }
+
+  &--sub {
+    background: $color-branded-tint;
+    padding-top: 0.5rem;
+  }
+
+  &--sub-mobile {
+    border-bottom: 4px solid $color-branded-tint;
+  }
+
+  &-search {
+    padding: 1rem;
+
+    @include mq(l) {
+      bottom: 65px;
+      padding: 0;
+      position: absolute;
+      right: 1rem;
+      width: 20rem;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 0.5rem;
+
+    @include mq(l) {
+      padding: 0;
+    }
+
+    &-header {
+      font-size: 1rem;
+      margin: 0.75rem 0 0.6rem;
+      padding: 0 0 0 1rem;
+    }
+  }
+
+  &__item {
+    border-left: 4px solid transparent;
+    display: block;
+    margin: 0 0 0.2rem;
+    &--active {
+      border-color: $color-white;
+    }
+
+    .ons-navigation--sub-mobile & {
+      &--active {
+        border-color: $color-branded;
+        li {
+          border: 0;
+        }
+      }
+    }
+
+    @include mq(l) {
+      border-bottom: 4px solid transparent;
+      border-left: 0;
+      display: inline-block;
+      margin: 0 0 0 1rem;
+      padding: 0 0 0.3rem;
+      position: relative;
+      text-align: center;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &--active,
+      &:hover {
+        border-color: $color-white;
+      }
+
+      .ons-navigation--sub & {
+        &:hover,
+        &--active {
+          border-color: $color-text-link;
+        }
+      }
+    }
+  }
+
+  &__link {
+    color: $color-white;
+    display: block;
+    margin: 0 0.35rem;
+    padding: 0.1rem 0.55rem;
+    text-decoration: none;
+
+    &--section {
+      margin: 0;
+      padding: 0;
+    }
+
+    &:hover,
+    &:focus {
+      color: $color-white;
+      text-decoration: none;
+    }
+
+    .ons-navigation--sub &,
+    .ons-navigation--sub-mobile & {
+      color: $color-text-link;
+      &:hover,
+      &:focus {
+        color: $color-text-link;
+      }
+    }
+
+    @include mq(l) {
+      display: inline-block;
+      font-size: 1rem;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__item--active > &__link {
+    font-weight: 700;
+  }
+}

package/components/navigation/navigation.dom.js

@@ -0,0 +1,39 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
+  const navigationEl = document.querySelector('.ons-js-navigation');
+  const navigationHideClass = 'ons-u-d-no@xxs@l';
+  const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
+  const subNavigationEl = document.querySelector('.proto-ons-js-secondary-nav');
+  const subNavigationHideClass = 'ons-u-d-no';
+  const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
+  const searchEl = document.querySelector('.ons-js-navigation-search');
+  const searchHideClass = 'ons-u-d-no@xs@l';
+  const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
+  const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
+  const servicesHideClass = 'ons-u-d-no';
+
+  if (toggleNavigationBtn) {
+    const NavigationToggle = (await import('./navigation')).default;
+
+    new NavigationToggle(toggleNavigationBtn, navigationEl, navigationHideClass).registerEvents();
+  }
+
+  if (toggleSubNavigationBtn) {
+    const SubNavigationToggle = (await import('./navigation')).default;
+    new SubNavigationToggle(toggleSubNavigationBtn, subNavigationEl, subNavigationHideClass).registerEvents();
+  }
+
+  if (toggleSearchBtn) {
+    const searchToggle = (await import('./navigation')).default;
+
+    new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
+  }
+
+  if (toggleServicesBtn) {
+    const servicesToggle = (await import('./navigation')).default;
+
+    new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
+  }
+});