@worksafevictoria/wcl7.5 1.1.0-beta.8 → 1.1.0-beta.80

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

@@ -0,0 +1,1176 @@
+<template>
+  <div>
+    <header
+      v-if="headerMenu"
+      :class="'app-header' + (this.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 && this.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 && this.screen === 'desktop') ||
+            (!isMobileMenuOpen && this.screen === 'mobile')
+          "
+          class="app-header__app-branding"
+        >
+          
+        </div>
+        <nav
+          v-if="isMobileMenuOpen || this.screen === 'desktop'"
+          :class="{
+            'styled-scrollbar': this.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="this.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"
+                target="_blank"
+                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="this.screen === 'mobile'"
+                    ref="menuBackButton"
+                    class="dark"
+                    @click="mobileGoBack"
+                    @keydown.tab="submenuFocus"
+                  >
+                    <caret-left/>
+                    {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
+                  </button>
+                  <button
+                    v-if="
+                      (isSecondLevelOpen && this.screen === 'desktop') ||
+                      (isMobileMenuOpen && this.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': this.screen === 'desktop' }"
+                >
+                  <div
+                    class="sub-nav-container__wrap"
+                    :class="{
+                      'styled-scrollbar':
+                        this.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="!(this.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>
+
+            <!-- More action button in bottom menu -->
+
+            <li class="nav-item" id="moreDesktop" v-if="this.screen === 'desktop' && this.moreList.length > 0">
+              <a class="dark" role="button" @click="showMore = !showMore">
+                <span>More</span>
+                <caret-down class="caret-down" style="padding-top: 4px; height: 16px; width: 16px"/>
+              </a>                
+              <div
+                v-if="showMore"
+                class="styled-scrollbar"
+              >
+              <div >
+                <div class="sub-nav-container__innermore">
+                <ul id="moreMenu">
+                  <li v-for="(firstLevelLink, parentIndex) in this.moreList"
+                    :key="firstLevelLink.key"
+                    :ref="`firstLevelMenuItemM-${parentIndex}`"
+                    class="nav-item more-menu"
+                  >
+                    <a
+                      v-if="firstLevelLink.below"
+                      class="dark"
+                      href
+                      role="button"
+                      aria-expanded="false"
+                      @click.prevent="firstLevelClick(firstLevelLink,`firstLevelMenuItemM-${parentIndex}`,)"
+                      @mouseover="mouseHover('firstLevelMenuItemM', parentIndex)"
+                      @mouseleave="mouseLeave('firstLevelMenuItemM', parentIndex)"
+                      @focusin="mouseHover('firstLevelMenuItemM', parentIndex)"
+                      @focusout="mouseLeave('firstLevelMenuItemM', parentIndex)"
+                    >
+                      <span>{{ firstLevelLink.title }}</span>
+
+                      <caret-right
+                        v-if="!isSecondLevelOpen && !isThirdLevelOpen"
+                        class="caret-right"
+                      />
+                    </a>
+                    <a
+                      v-else-if="!firstLevelLink.relative"
+                      :href="firstLevelLink.absolute"
+                      target="_blank"
+                      @click.native="showMore = !showMore"
+                      class="dark"
+                    >
+                      <span>{{ firstLevelLink.title }}</span>
+                     
+                    </a>
+                    <nuxt-link
+                      v-else
+                      class="dark"
+                      :to="firstLevelLink.relative"
+                      @click.native="showMore = !showMore; fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
+                    >
+                      <span>{{ firstLevelLink.title }}</span>
+                      <caret-right
+                        v-if="!isSecondLevelOpen && !isThirdLevelOpen"
+                        class="caret-right"
+                      />
+                    </nuxt-link>
+                    <div v-if="isSecondLevelOpen" class="sub-nav-container">
+                      <div class="app-header__close-button">
+                        <button
+                        v-if="this.screen === 'mobile'"
+                          ref="menuBackButton"
+                          class="dark"
+                          @click="mobileGoBack"
+                          @keydown.tab="submenuFocus"
+                        >
+                          <caret-left/>
+                          {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
+                        </button>
+                        <button
+                          v-if="
+                            (isSecondLevelOpen && this.screen === 'desktop') ||
+                            (isMobileMenuOpen && this.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': this.screen === 'desktop' }"
+                      >
+                        <div
+                          class="sub-nav-container__wrap"
+                          :class="{'styled-scrollbar': this.screen === 'mobile' && isSecondLevelOpen,}"
+                        >
+                          <div
+                            class="selected-title"
+                            :class="{ 'selected-title--chrome': isChrome }"
+                          >
+                            <nuxt-link
+                              v-if="firstLevelLink.relative"
+                              :ref="`secondLevelSelectedTitleM-${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="`secondLevelMenuItemM-${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,`secondLevelMenuItemM-${parentIndex}-${secondIndex}`,)"
+                                  @mouseover="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @mouseleave="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @focusin="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @focusout="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                >
+                                  <span>{{ secondLevelLink.title }}</span>
+                                  <caret-right
+                                    v-if="!(this.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('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @mouseleave.native="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @focusin.native="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
+                                  @focusout.native="mouseLeave('secondLevelMenuItemM',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="`secondLevelSelectedTitleM-${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="`thirdLevelMenuItemM-${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('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
+                                            @mouseleave.native="mouseLeave('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
+                                            @focusin.native="mouseHover('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
+                                            @focusout.native="mouseLeave('thirdLevelMenuItemM',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>
+                </ul>
+              </div>
+              </div>
+              
+                
+              </div>
+            </li>
+            <li v-if="isWorkWell && this.screen === 'desktop'" class="nav-item hide">
+              <a href="#" class="dark" @focus="resetTab"></a>
+            </li>
+          </ul>
+ 
+          
+        </nav>
+        <div v-if="this.screen === 'mobile'" class="app-header__mobile-menu-container">
+          <ul id="mobileitems">
+            <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 chevronIcon from '../../../assets/icons/caret-right.svg?url'
+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,
+    chevronIcon
+  },
+  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,
+      addWidth: 35,
+      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 (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)
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+    window.addEventListener('resize', this.updateMoreMenu())
+    })
+    this.updateMoreMenu()
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.screenWidth),
+    window.removeEventListener('resize', this.updateMoreMenu)
+  },
+  created() {
+    if (typeof window !== 'undefined' && window) {
+      window.addEventListener('resize', this.screenWidth)
+      this.screenWidth()
+    }
+    if (this.$bus) {
+      this.$bus.$on('site-search', (query) => {
+        this.searchQuery = query
+        if (query) {
+          this.showSearch()
+        }
+      })
+    }
+  },
+  methods: {
+    screenWidth() {
+      this.windowWidth = window.innerWidth;
+    },
+    updateMoreMenu(screenVal) {
+      const nItems = document.getElementById('navitems')
+      var scrollWidth = nItems?.scrollWidth
+
+      if (scrollWidth > this.windowWidth) {
+        scrollWidth = scrollWidth + this.addWidth
+       
+        while (scrollWidth > this.windowWidth) {
+          if ( this.headerMenu.length > 1) {   // check that there's more than one item in header
+            var tempItem = this.headerMenu.pop()
+            this.moreList.unshift(tempItem)
+            scrollWidth = scrollWidth - tempItem.title.length
+         } else {
+          scrollWidth = this.windowWidth
+         }
+        }        
+      } else if ( this.moreList.length > 0 ) {
+        let tempWidth = scrollWidth
+        let ctr = 1
+        while (ctr <= this.moreList.length) {
+          var tempItem1 = this.moreList[0]
+          tempWidth = tempWidth + tempItem1.title.length
+          if (tempWidth > this.windoWidth) {  //stop if newWidth would be greater than the windowWidth
+            ctr = this.moreList.length
+          } else {  // move item fron dropdownArray to headerArray
+            var tempItem2 = this.moreList.shift()
+            this.headerMenu.push(tempItem2) 
+            scrollWidth = tempWidth
+          }
+          ctr++
+        }
+      }
+    },
+    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 (this.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>