@worksafevictoria/wcl7.5 1.1.0-beta.5 → 1.1.0-beta.51

package/src/components/Global/AppHeaderNew/index.vue

@@ -0,0 +1,1105 @@
+<template>
+  <div>
+    <header
+      v-if="headerMenu"
+      :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
+    >
+      <!-- Top menu -->
+      <div class="logo">
+          <nuxt-link class="dark" to="/">
+            <img
+              :alt="
+                isWorkWell
+                  ? 'Work Well Victoria - Logo'
+                  : 'Work Safe Victoria - Logo'
+              "
+              width="127"
+              height="55"
+              :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
+            />
+          </nuxt-link>
+        <span class="logo__nav">
+          <table>
+            <tbody>
+              <tr>
+              <td>
+                <nuxt-link
+                to="/languages"
+                @click.native="fireAnalytics('Choose your language', '/languages')"
+                title="Language"
+              >
+                <span v-if="!topLevelIconsOnly">Choose your language </span>
+                <img alt="Language Icon" width="20px" height="20px" :src=LanguageIcon />
+              </nuxt-link>
+              </td>
+              <td>
+                <a href="javascript:void(0)" @click="show = !show" title="Contrast">
+                  <span v-if="!topLevelIconsOnly">Adjust control</span> <img alt="Contrast Icon" width="20px" height="20px" :src=ContrastIcon />
+                </a>
+                <div
+                  class="flex-container"
+                  v-if="show"
+                >
+                  <div class="contrast_slide--box-list">
+                    <div v-for="list in lists" :key="list.value">
+                      <label>
+                        <input
+                          type="radio"
+                          :name="list.name"
+                          :value="list.value"
+                          :checked="list.value === selectedValue"
+                          @click="handleContrast"
+                        />
+                        {{ list.label }}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <nuxt-link
+                  class="cta-button cta-button--text-only cta-button--slim"
+                  to="/search"
+                  title="Search"
+                  ><span v-if="!topLevelButtonIconsOnly">Search  &nbsp;</span> <img alt="Search Icon" width="20px" height="20px" :src=NavSearchIcon />
+                </nuxt-link>
+              </td>
+              <td>
+                <nuxt-link
+                  class="cta-button cta-button--text-only cta-button--slim cta-button--dark-no-filter"
+                  to="/login"
+                  title="Login"
+                  ><span v-if="!topLevelButtonIconsOnly">Login &nbsp;</span><span><img alt="Login Icon" width="20px" height="20px" :src=LoginLeft /></span>
+                </nuxt-link>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </span>
+      </div>
+      <!-- Bottom menu -->
+      <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
+        <div class="app-header__close-button mobile-close">                 
+          <button
+            v-if="
+              (isMobileMenuOpen && screen === 'mobile' && !isSecondLevelOpen)
+            "
+            ref="closeMenuButton"
+            class="dark"
+            @click="closeMegaMenu"
+          >
+            <img :alt="Close" width="12" height="12" :src="Close"/>
+              Close menu
+          </button>
+        </div>
+        <div
+          v-if="
+            (!isSecondLevelOpen && screen === 'desktop') ||
+            (!isMobileMenuOpen && screen === 'mobile')
+          "
+          class="app-header__app-branding"
+        >
+          
+        </div>
+        <nav
+          v-if="isMobileMenuOpen || screen === 'desktop'"
+          :class="{
+            'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
+          }"
+        >
+          <ul class="app-header__nav-menu" id="navitems">
+            <li
+              v-for="(firstLevelLink, parentIndex) in headerMenu"
+              :key="firstLevelLink.key"
+              :ref="`firstLevelMenuItem-${parentIndex}`"
+              class="nav-item"
+            >
+              <a
+                v-if="firstLevelLink.below"
+                class="dark"
+                href
+                role="button"
+                aria-expanded="false"
+                @click.prevent="
+                  firstLevelClick(
+                    firstLevelLink,
+                    `firstLevelMenuItem-${parentIndex}`,
+                  )
+                "
+                @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
+                @mouseleave="mouseLeave('firstLevelMenuItem', parentIndex)"
+                @focusin="mouseHover('firstLevelMenuItem', parentIndex)"
+                @focusout="mouseLeave('firstLevelMenuItem', parentIndex)"
+              >
+                <span>{{ firstLevelLink.title }}</span>
+
+                <caret-down v-if="screen === 'desktop'" class="caret-down" />
+                <caret-right
+                  v-else-if="!isSecondLevelOpen && !isThirdLevelOpen"
+                  class="caret-right"
+                />
+              </a>
+              <a
+                v-else-if="!firstLevelLink.relative"
+                :href="firstLevelLink.absolute"
+                class="dark"
+              >
+                <span>{{ firstLevelLink.title }}</span>
+              </a>
+              <nuxt-link
+                v-else
+                class="dark"
+                :to="firstLevelLink.relative"
+                @click.native="fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
+              >
+                <span>{{ firstLevelLink.title }}</span>
+              </nuxt-link>
+              <div v-if="isSecondLevelOpen" class="sub-nav-container">
+                <div class="app-header__close-button">
+                  <button
+                  v-if="screen === 'mobile'"
+                    ref="menuBackButton"
+                    class="dark"
+                    @click="mobileGoBack"
+                    @keydown.tab="submenuFocus"
+                  >
+                    <caret-left/>
+                    {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
+                  </button>
+                  <button
+                    v-if="
+                      (isSecondLevelOpen && screen === 'desktop') ||
+                      (isMobileMenuOpen && screen === 'mobile')
+                    "
+                    ref="closeMenuButton"
+                    class="dark"
+                    @click="closeMegaMenu"
+                  >
+                  <img :alt="Close" width="12" height="12" :src="Close"/>
+                    Close menu
+                  </button>
+                </div>
+                <div
+                  class="sub-nav-container__inner"
+                  :class="{ 'styled-scrollbar': screen === 'desktop' }"
+                >
+                  <div
+                    class="sub-nav-container__wrap"
+                    :class="{
+                      'styled-scrollbar':
+                        screen === 'mobile' && isSecondLevelOpen,
+                    }"
+                  >
+                    <div
+                      class="selected-title"
+                      :class="{ 'selected-title--chrome': isChrome }"
+                    >
+                      <nuxt-link
+                        v-if="firstLevelLink.relative"
+                        :ref="`secondLevelSelectedTitle-${parentIndex}`"
+                        :to="firstLevelLink.relative"
+                        class="dark"
+                        @click.native="fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
+                        @keydown.tab.native="backBtnFocus($event)"
+                      >
+                        <span>{{ firstLevelLink.title }}</span>
+                      </nuxt-link>
+                      <span v-else>{{ firstLevelLink.title }}</span>
+                    </div>
+                    <div class="selected-items">
+                      <ul v-if="firstLevelLink.below" class="sub-nav-group">
+                        <li
+                          v-for="(
+                            secondLevelLink, secondIndex
+                          ) in firstLevelLink.below"
+                          :key="secondLevelLink.key"
+                          :ref="`secondLevelMenuItem-${parentIndex}-${secondIndex}`"
+                          class="sub-nav-parent-item"
+                        >
+                          <a
+                            v-if="secondLevelLink.below"
+                            href
+                            class="dark"
+                            role="button"
+                            aria-expanded="false"
+                            @keydown.tab="
+                              searchFocus(
+                                secondIndex,
+                                firstLevelLink.below.length,
+                                $event,
+                              )
+                            "
+                            @click.prevent="
+                              secondLevelClick(
+                                secondLevelLink,
+                                `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
+                              )
+                            "
+                            @mouseover="
+                              mouseHover(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @mouseleave="
+                              mouseLeave(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @focusin="
+                              mouseHover(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @focusout="
+                              mouseLeave(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                          >
+                            <span>{{ secondLevelLink.title }}</span>
+                            <caret-right
+                              v-if="!(screen === 'mobile' && isThirdLevelOpen)"
+                              class="caret-right"
+                            />
+                          </a>
+                          <a
+                            v-else-if="!secondLevelLink.relative"
+                            :href="secondLevelLink.absolute"
+                            class="dark"
+                          >
+                            <span>{{ secondLevelLink.title }}</span>
+                          </a>
+                          <nuxt-link
+                            v-else
+                            class="dark"
+                            :to="secondLevelLink.relative"
+                            @keydown.tab.native="
+                              searchFocus(
+                                secondIndex,
+                                firstLevelLink.below.length,
+                                $event,
+                              )
+                            "
+                            @mouseover.native="
+                              mouseHover(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @mouseleave.native="
+                              mouseLeave(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @focusin.native="
+                              mouseHover(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @focusout.native="
+                              mouseLeave(
+                                'secondLevelMenuItem',
+                                parentIndex,
+                                secondIndex,
+                              )
+                            "
+                            @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
+                          >
+                            <span>{{ secondLevelLink.title }}</span>
+                          </nuxt-link>
+                          <div v-if="isThirdLevelOpen" class="sub-nav">
+                            <div class="sub-nav__wrap">
+                              <div class="selected-title">
+                                <nuxt-link
+                                  v-if="secondLevelLink.relative"
+                                  :ref="`secondLevelSelectedTitle-${parentIndex}-${secondIndex}`"
+                                  :to="secondLevelLink.relative"
+                                  class="dark"
+                                  @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
+                                  @keydown.tab.native="backBtnFocus($event)"
+                                >
+                                  <span>{{ secondLevelLink.title }}</span>
+                                </nuxt-link>
+                                <span v-else>{{ secondLevelLink.title }}</span>
+                              </div>
+                              <div class="selected-sub-nav">
+                                <ul
+                                  v-if="secondLevelLink.below"
+                                  class="sub-nav-group"
+                                >
+                                  <li
+                                    v-for="(
+                                      thirdLevelLink, thirdIndex
+                                    ) in secondLevelLink.below"
+                                    :key="thirdLevelLink.key"
+                                    :ref="`thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`"
+                                  >
+                                    <nuxt-link
+                                      v-if="thirdLevelLink.relative"
+                                      class="dark"
+                                      :to="thirdLevelLink.relative"
+                                      @keydown.tab.native="
+                                        searchFocus(
+                                          thirdIndex,
+                                          secondLevelLink.below.length,
+                                          $event,
+                                        )
+                                      "
+                                      @mouseover.native="
+                                        mouseHover(
+                                          'thirdLevelMenuItem',
+                                          parentIndex,
+                                          secondIndex,
+                                          thirdIndex,
+                                        )
+                                      "
+                                      @mouseleave.native="
+                                        mouseLeave(
+                                          'thirdLevelMenuItem',
+                                          parentIndex,
+                                          secondIndex,
+                                          thirdIndex,
+                                        )
+                                      "
+                                      @focusin.native="
+                                        mouseHover(
+                                          'thirdLevelMenuItem',
+                                          parentIndex,
+                                          secondIndex,
+                                          thirdIndex,
+                                        )
+                                      "
+                                      @focusout.native="
+                                        mouseLeave(
+                                          'thirdLevelMenuItem',
+                                          parentIndex,
+                                          secondIndex,
+                                          thirdIndex,
+                                        )
+                                      "
+                                      @click.native="
+                                        fireAnalytics(thirdLevelLink.title, thirdLevelLink.relative)
+                                      "
+                                    >
+                                      <span>{{ thirdLevelLink.title }}</span>
+                                    </nuxt-link>
+                                    <a
+                                      v-else
+                                      class="dark"
+                                      :href="thirdLevelLink.absolute"
+                                    >
+                                      <span>{{ thirdLevelLink.title }}</span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <!-- <li id="moreDesktop" v-if="screen === 'desktop' && this.moreList.length > 0">
+              <a class="dark" role="button" @click="showMore = !showMore">
+                <span>More</span>
+                <caret-down class="caret-down" />
+              </a>
+              <div
+                  class="flex-container"
+                  v-if="showMore"
+                >
+                  <div class="contrast_slide--box-list">
+                    <div v-for="list in this.moreList" :key="list.value">
+                      <label>
+                        <input
+                          type="radio"
+                          :name="list.name"
+                          :value="list.value"
+                          :checked="list.value === selectedValue"
+                          @click="handleContrast"
+                        />
+                        {{ list.label }}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+            </li> -->
+            <li v-if="isWorkWell && screen === 'desktop'" class="nav-item hide">
+              <a href="#" class="dark" @focus="resetTab"></a>
+            </li>
+            
+          </ul>
+        </nav>
+        <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
+          <ul id="mobileitems">
+            <!-- <li v-if="!isMobileMenuOpen" id="moreMobile">
+              <a class="dark" role="button" @click.prevent="showMobileMenu">
+                <span>More</span>
+                <caret-down class="caret-down" />
+              </a>
+            </li> -->
+            <li v-if="!isMobileMenuOpen">
+            <a class="dark" role="button" @click.prevent="showMobileMenu">
+              <span>Menu</span>
+              <menu-icon class="menu-icon" />
+            </a>
+          </li>
+          </ul>
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<script>
+import ModalSearch from './ModalSearch/index.vue'
+import Close from './../../../assets/icons/close.svg?url'
+import WorkSafeLogo from './../../../assets/icons/WSV-reversed.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import CaretRight from './../../../assets/icons/caret-right.svg?component'
+import CaretDown from './../../../assets/icons/caret-down.svg?component'
+import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg?component'
+import CaretLeft from './../../../assets/icons/caret-left.svg?component'
+import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg?component'
+import LoginLeft from './../../../assets/icons/login.svg?url'
+import LanguageIcon from './../../../assets/icons/lang.svg?url'
+import ContrastIcon from './../../../assets/icons/contrast.svg?url'
+import NavSearchIcon from './../../../assets/icons/search.svg?url'
+import CtaButton from '../../SubComponents/CtaButton/index.vue'
+import { ref } from "vue";
+
+export default {
+  setup() {
+      const show = ref(false);
+      const showMore = ref(false);
+      const moreList = [];
+      return {
+        show,
+        showMore,
+        moreList
+      };
+    },
+  components: {
+    ModalSearch,
+    Close,
+    CaretRight,
+    CaretDown,
+    CaretLeft,
+    MenuIcon,
+    SearchIcon,
+    CtaButton,
+  },
+  props: {
+    headerMenu: {
+      type: Array,
+      required: true,
+    },
+    contentParser: {
+      type: Function,
+      required: true,
+    },
+    isWorkWell: {
+      type: Boolean,
+      default: false,
+    },
+    authenticated: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      screen: null,
+      topLevelIconsOnly: false,
+      topLevelButtonIconsOnly: false,
+      isMobileMenuOpen: false,
+      isSecondLevelOpen: false,
+      isThirdLevelOpen: false,
+      isSearchOpen: false,
+      firstLevelItemName: null,
+      firstLevelItemRef: null,
+      secondLevelItemRef: null,
+      WorkSafeLogo,
+      WorkWellLogo,
+      CaretRight,
+      CaretDown,
+      SearchIcon,
+      Close,
+      CaretLeft,
+      MenuIcon,
+      windowWidth: 0,
+      searchQuery: null,
+      LanguageIcon,
+      LoginLeft,
+      ContrastIcon,
+      NavSearchIcon,
+      lists: [
+        {
+          name: 'contrast',
+          value: 'default',
+          label: 'Light contrast (default)'
+        },
+        {
+          name: 'contrast',
+          value: 'high_contrast',
+          label: 'Increased contrast'
+        },
+        { name: 'contrast', 
+          value: 'grayscale', 
+          label: 'Greyscale' 
+        }
+      ],
+      selectedValue: null
+    }
+  },
+  computed: {
+    showSecondLevelCaret() {
+      return (
+        (this.screen === 'mobile' &&
+          this.isSecondLevelOpen &&
+          !this.isThirdLevelOpen) ||
+        this.screen === 'desktop'
+      )
+    },
+    isChrome() {
+      return !!window.chrome
+    },
+  },
+  watch: {
+    $route() {
+      if (this.screen) {
+        this.closeMegaMenu()
+      }
+    },
+    windowWidth(val) {
+     
+      if (val > 980) {
+        this.screen = 'desktop'
+      } else if (val <= 980) {
+        this.screen = 'mobile'
+        if (this.isSecondLevelOpen === true) {
+          this.isMobileMenuOpen = true
+        }
+      }
+       // added code to check if val < 760, when top menu should revert to icons, not labels.
+      if (val < 760) {
+        this.topLevelIconsOnly = true
+      } else {
+        this.topLevelIconsOnly = false
+      }
+      if (val < 500) {
+        this.topLevelButtonIconsOnly = true
+      } else {
+        this.topLevelButtonIconsOnly = false
+      }
+      this.updateMoreMenu(val)
+    },
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.screenWidth)
+  },
+  created() {
+    if (typeof window !== 'undefined' && window) {
+      window.addEventListener('resize', this.screenWidth)
+      this.screenWidth()
+    }
+    if (this.$bus) {
+      console.log('🚀 ~ this.$bus.$on ~ this.$bus:', this.$bus)
+      this.$bus.$on('site-search', (query) => {
+        this.searchQuery = query
+        if (query) {
+          this.showSearch()
+        }
+      })
+    }
+  },
+  methods: {
+    screenWidth() {
+      this.windowWidth = window.innerWidth
+    },
+    updateMoreMenu(screenVal) {
+      console.log('in updateMoreMenu - val' + screenVal)
+      const nItems = document.getElementById('navitems')
+      // let nItem = nItems.getElementsByTagName('li')
+      // console.log('nItem number: ' + nItem.length)
+      // const mItems = document.getElementById('mobileitems')
+      console.log('nItems: ' + nItems)
+      // console.log('mItems: ' + mItems)
+      // let navI = document.getElementById('navitems')
+      // console.log('navI items: ' + navI.children)
+      // if (navI?.offsetWidth) {
+      //   console.log('navI: ' + navI.offsetWidth)
+      // } else {
+      //   console.log('navI offsetWidth not available')
+      // }
+      // console.log('headerMenu: ' + this.headerMenu[0].title)
+      // console.log('headerMenu items: ' + this.headerMenu.length)
+      this.moreList = [
+        {"value":"One",
+         "label":"First Item"},
+         {"value":"Two",
+         "label":"Second Item"}, 
+      ]
+      let moreItem = {
+        "value": "Three",
+        "label": "Third Item"
+      }
+      this.moreList.unshift(moreItem)
+
+      let xItems = this.headerMenu
+      var vItems = []
+
+      console.log('xItems: ' + xItems.length)
+
+      if (xItems.length > 7) {
+        var tempItems = xItems.slice(-(xItems.length - 7))
+        console.log('tempItems: ' + tempItems[0].title + ', totalnumber: ' + tempItems.length)
+      }
+
+      
+      // const mChildren = this.mItems.children;
+      // console.log('mChildren: ' + mChildren)
+      // let numW = 0;
+        
+        /* [...mChildren].forEach(item => {
+          item.outHTML = '';
+          this.nItems.appendChild(item);
+        })  */ 
+
+        // const teleW = this.nItems.offsetWidth,
+          // nChildren = this.nItems.children;
+
+        /* [...mChildren].forEach(item => {
+          numW += item.offsetWidth;
+
+          if (numW > teleW) {
+            item.outHTML = '';
+            this.nItems.appendChild(item);
+          }
+        }); */
+    },
+    firstLevelClick(item, ref) {
+      // Reset screen to fix whitespace
+      if (window && window.scrollTo && this.screen === 'desktop') {
+        window.scrollTo(0, 0)
+      }
+
+      let selectedItem = this.$refs[ref][0]
+      let previouslyOpenItem = this.getActiveParent()
+
+      // Set this for mobile
+      this.firstLevelItemName = item.title
+      this.firstLevelItemRef = ref
+
+      // Set the first item to the variable
+      if (previouslyOpenItem.length) {
+        previouslyOpenItem = previouslyOpenItem[0]
+      }
+      // If the menu is not open, open it
+      if (item.below && this.isSecondLevelOpen === false) {
+        selectedItem.classList.add('isActiveParent')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'true')
+        this.isSecondLevelOpen = true
+        this.letBodyOverflow(false)
+      }
+      // If the menu is already open and the same item is clicked,
+      // close it
+      else if (
+        item.below &&
+        this.isSecondLevelOpen === true &&
+        selectedItem === previouslyOpenItem
+      ) {
+        selectedItem.classList.remove('isActiveParent')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        this.isSecondLevelOpen = false
+        this.letBodyOverflow(true)
+      }
+      // If the link has no children then go to that page
+      else if (!item.below) {
+        if (item.relative !== '/') {
+          this.$router.push(item.relative)
+        }
+      }
+      // Otherwise just remove the existing open menu and add
+      // the isActive class on the new selected item
+      else {
+        previouslyOpenItem.classList.remove('isActiveParent')
+        selectedItem.classList.add('isActiveParent')
+        previouslyOpenItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'true')
+      }
+      if (this.screen === 'mobile') {
+        this.focusOnNext(selectedItem)
+      }
+    },
+    secondLevelClick(item, ref) {
+      let selectedItem = this.$refs[ref][0]
+      let previouslyOpenItem = this.getActiveChild()
+      this.secondLevelItemRef = ref
+
+      // Set the first item to the variable
+      if (previouslyOpenItem.length) {
+        previouslyOpenItem = previouslyOpenItem[0]
+      }
+
+      // If the menu is not open, open it
+      if (item.below && this.isThirdLevelOpen === false) {
+        selectedItem.classList.add('isActiveChild')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'true')
+        this.isThirdLevelOpen = true
+      }
+      // If the link has no children then go to that page
+      else if (!item.below) {
+        if (item.relative !== '/') {
+          this.$router.push(item.relative)
+        }
+      }
+      // If the menu is already open and the same item is clicked,
+      // close it
+      else if (
+        item.below &&
+        this.isThirdLevelOpen === true &&
+        selectedItem === previouslyOpenItem
+      ) {
+        selectedItem.classList.remove('isActiveChild')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        this.isThirdLevelOpen = false
+      }
+      // Otherwise just remove the existing open menu and add
+      // the isActive class on the new selected item
+      else {
+        previouslyOpenItem.classList.remove('isActiveChild')
+        previouslyOpenItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        selectedItem.classList.add('isActiveChild')
+        selectedItem
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'true')
+      }
+
+      this.focusOnNext(selectedItem)
+    },
+    
+    showMobileMenu() {
+      // Reset screen to top to fix whitespace issues
+      if (window) {
+        window.scrollTo(0, 0)
+      }
+
+      this.isMobileMenuOpen = true
+      this.letBodyOverflow(false)
+      this.showMore = false
+      /* this.$nextTick(() => {
+        this.$refs['firstLevelMenuItem-0'][0].firstElementChild.focus()
+      }) */
+    },
+    mouseHover(refID, parentIndex, secondIndex, thirdIndex) {
+      let theLI = this.getLIaboveHovered(
+        refID,
+        parentIndex,
+        secondIndex,
+        thirdIndex,
+      )
+      if (theLI) {
+        let A = theLI.getElementsByTagName('A')[0]
+        A.style.borderBottom = '1px solid transparent'
+      }
+    },
+    mouseLeave(refID, parentIndex, secondIndex, thirdIndex) {
+      let theLI = this.getLIaboveHovered(
+        refID,
+        parentIndex,
+        secondIndex,
+        thirdIndex,
+      )
+      if (theLI) {
+        let A = theLI.getElementsByTagName('A')[0]
+        A.removeAttribute('style')
+      }
+    },
+    getLIaboveHovered(refID, parentIndex, secondIndex, thirdIndex) {
+      // Check if its a first level link
+      if (secondIndex === undefined && thirdIndex === undefined) {
+        if (screen === 'desktop') {
+          return
+        }
+
+        let prevFirstIndex = parentIndex - 1
+
+        if (prevFirstIndex < 0) {
+          return
+        } else {
+          let aboveHovered = `${refID}-${prevFirstIndex}`
+          return this.$refs[aboveHovered][0]
+        }
+      }
+      // Check if its a second level link
+      else if (thirdIndex === undefined) {
+        let prevSecondIndex = secondIndex - 1
+        if (prevSecondIndex < 0) {
+          return
+        } else {
+          let aboveHovered = `${refID}-${parentIndex}-${prevSecondIndex}`
+          return this.$refs[aboveHovered][0]
+        }
+      }
+      // If its a third level link
+      else {
+        let prevThirdIndex = thirdIndex - 1
+        if (prevThirdIndex < 0) {
+          return
+        } else {
+          let aboveHovered = `${refID}-${parentIndex}-${secondIndex}-${prevThirdIndex}`
+          return this.$refs[aboveHovered][0]
+        }
+      }
+    },
+    showSearch() {
+      this.isSearchOpen = true
+      this.letBodyOverflow(false)
+    },
+    closeSearch() {
+      this.isSearchOpen = false
+      this.letBodyOverflow(true)
+      this.resetTab()
+      this.searchQuery = null
+    },
+    closeMegaMenu() {
+      let activeChild = this.getActiveChild()
+      let theActiveParent = this.getActiveParent()
+
+      if (theActiveParent.length) {
+        theActiveParent = theActiveParent[0]
+        theActiveParent.classList.remove('isActiveParent')
+        theActiveParent
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+      }
+
+      if (this.isThirdLevelOpen) {
+        activeChild = activeChild[0]
+        activeChild.classList.remove('isActiveChild')
+        activeChild
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        this.isThirdLevelOpen = false
+      }
+      this.isMobileMenuOpen = false
+      this.isSecondLevelOpen = false
+      this.letBodyOverflow(true)
+    },
+    letBodyOverflow(state) {
+      let body = document.body
+      let main = document.getElementsByTagName('main')[0]
+      let footer = document.getElementsByTagName('footer')[0]
+      switch (state) {
+        case true:
+          body.removeAttribute('style')
+          if (main) {
+            main.removeAttribute('style')
+          }
+          if (footer) {
+            footer.removeAttribute('style')
+          }
+          break
+        case false:
+          body.style.overflow = 'hidden'
+          body.style.background = '#ffffff'
+          if (main) {
+            main.style.display = 'none'
+          }
+          if (footer) {
+            footer.style.display = 'none'
+          }
+          break
+      }
+    },
+    resetTab(el) {
+      if (this.$refs.closeMenuButton) {
+        if (el) {
+          el.preventDefault()
+        }
+        this.$refs.closeMenuButton.focus()
+      }
+    },
+    getActiveParent() {
+      return document.getElementsByClassName('isActiveParent')
+    },
+    getActiveChild() {
+      return document.getElementsByClassName('isActiveChild')
+    },
+    mobileGoBack() {
+      if (this.isThirdLevelOpen) {
+        let activeChild = this.getActiveChild()
+        activeChild = activeChild[0]
+        activeChild.classList.remove('isActiveChild')
+        activeChild
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        this.isThirdLevelOpen = false
+      } else if (this.isSecondLevelOpen) {
+        let activeParent = this.getActiveParent()
+        activeParent = activeParent[0]
+        activeParent.classList.remove('isActiveParent')
+        activeParent
+          .getElementsByTagName('a')[0]
+          .setAttribute('aria-expanded', 'false')
+        this.isSecondLevelOpen = false
+      }
+    },
+    searchFocus(index, length, event) {
+      if (index === length - 1 && this.isMobileMenuOpen && !event.shiftKey) {
+        event.preventDefault()
+        this.$refs.searchButton.focus()
+      } else if (index === 0 && this.isMobileMenuOpen && event.shiftKey) {
+        event.preventDefault()
+        let firstIndex = this.firstLevelItemRef.split('-')[1]
+        let key = null
+        if (!this.isThirdLevelOpen) {
+          key = `secondLevelSelectedTitle-${firstIndex}`
+        } else if (this.isThirdLevelOpen) {
+          let secondIndex = this.secondLevelItemRef.split('-')[2]
+          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`
+        }
+        if (this.$refs[key][0].$el.nodeName === 'A') {
+          this.$refs[key][0].$el.focus()
+        }
+      }
+    },
+    submenuFocus(event) {
+      if (this.isMobileMenuOpen && !event.shiftKey && this.isSecondLevelOpen) {
+        event.preventDefault()
+        let firstIndex = this.firstLevelItemRef.split('-')[1]
+        let key = null
+        if (!this.isThirdLevelOpen) {
+          key = `secondLevelSelectedTitle-${firstIndex}`
+        } else if (this.isThirdLevelOpen) {
+          let secondIndex = this.secondLevelItemRef.split('-')[2]
+          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`
+        }
+        if (this.$refs[key][0].$el.nodeName === 'A') {
+          this.$refs[key][0].$el.focus()
+        }
+      }
+    },
+    backBtnFocus(event) {
+      if (this.isMobileMenuOpen && event.shiftKey && this.isSecondLevelOpen) {
+        event.preventDefault()
+        this.$refs.menuBackButton.focus()
+      }
+    },
+    focusOnNext(selectedItem) {
+      this.$nextTick(() => {
+        selectedItem
+          .getElementsByClassName('selected-title')[0]
+          .firstChild.focus()
+      })
+    },
+    fireAnalytics(contentTitle, contentRelative) {
+      let payload = {
+        event: 'custom.interaction.megamenu.click',
+        group: 'Mega Menu',
+        label: contentTitle,
+        url: contentRelative,
+      }
+      // this.$store.dispatch('tracking/event', payload)
+    },
+    skipToContent() {
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
+      }
+    },
+    goToLocation(path) {
+      this.$router.push(path)
+    },
+    handleContrast(event) {
+      const selMode = event.target.value
+      // the css we are going to inject
+      let cssVar = ''
+      if (selMode === 'high_contrast') {
+        cssVar =
+          'html {filter: invert(100%);' +
+          '-webkit-filter: invert(100%);' +
+          '-moz-filter: invert(100%);' +
+          '-o-filter: invert(100%);' +
+          '-ms-filter: invert(100%); }' +
+          'img {filter: invert(100%);' +
+          'background-color: #BABABA; }' +
+          'section[style*="background-image"],' +
+          'div[style*="background-image"] {filter: invert(100%);}'
+      } else if (selMode === 'grayscale') {
+        cssVar =
+          'html {filter: grayscale(100%);' +
+          '-webkit-filter: grayscale(100%);' +
+          '-moz-filter: grayscale(100%);' +
+          '-o-filter: grayscale(100%);' +
+          '-ms-filter: grayscale(100%);}' +
+          'img {filter: invert(0);}'
+      } else {
+        cssVar = ''
+      }
+      this.setContrast(cssVar, selMode)
+    },
+    setContrast(cssVar, selMode) {
+      const head = document.getElementsByTagName('head')[0]
+
+      // Check if the style with the specified ID already exists
+      let style = document.getElementById('contrastStyle')
+
+      if (!style) {
+        // If style doesn't exist, create a new style element
+        style = document.createElement('style')
+        style.id = 'contrastStyle' // Assign an ID to the style element
+
+        if (style.styleSheet) {
+          style.styleSheet.cssText = cssVar
+        } else {
+          style.appendChild(document.createTextNode(cssVar))
+        }
+        // Inject the CSS to the head
+        head.appendChild(style)
+      } else {
+        // If style already exists, update its CSS
+        style.textContent = cssVar
+      }
+      style.setAttribute('data-sel', selMode) // Set a data attribute on the style element
+      // panel collapsing after making selection
+      this.show = !this.show
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+@import './mobile';
+</style>