@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,878 @@
+<template>
+  <header
+    v-if="headerMenu"
+    :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
+  >
+    <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
+      <div
+        v-if="
+          (!isSecondLevelOpen && screen === 'desktop') ||
+            (!isMobileMenuOpen && screen === 'mobile')
+        "
+        class="app-header__app-branding"
+      >
+        <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>
+      </div>
+
+      <div class="app-header__close-button">
+        <button
+          v-if="
+            (isSecondLevelOpen && screen === 'desktop') ||
+              (isMobileMenuOpen && screen === 'mobile')
+          "
+          ref="closeMenuButton"
+          class="dark"
+          @click="closeMegaMenu"
+        >
+          <close class="app-header__close-icon" />
+          Close menu
+        </button>
+      </div>
+      <div
+        v-if="isMobileMenuOpen && isSecondLevelOpen && screen === 'mobile'"
+        class="app-header__back-button-container"
+      >
+        <button
+          ref="menuBackButton"
+          class="app-header__back-button dark"
+          @click="mobileGoBack"
+          @keydown.tab="submenuFocus"
+        >
+          <caret-left />
+          {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
+        </button>
+      </div>
+      <nav
+        v-if="isMobileMenuOpen || screen === 'desktop'"
+        :class="{
+          'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen
+        }"
+      >
+        <ul class="app-header__nav-menu">
+          <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)"
+            >
+              <span>{{ firstLevelLink.title }}</span>
+            </nuxt-link>
+            <div v-if="isSecondLevelOpen" class="sub-nav-container">
+              <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)"
+                      @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)"
+                        >
+                          <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)"
+                                @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)
+                                    "
+                                  >
+                                    <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>
+          <!--          start of workwell login code-->
+          <li v-if="isWorkWell && !authenticated">
+            <nuxt-link class="dark" to="/workwell-login">
+              <span>Login</span>
+            </nuxt-link>
+          </li>
+          <li v-if="isWorkWell && authenticated">
+            <nuxt-link class="dark" to="/toolkit/dashboard">
+              <span>My Actions</span>
+            </nuxt-link>
+          </li>
+          <li v-if="isWorkWell && authenticated">
+            <nuxt-link class="dark" to="/help">
+              <span>Help</span>
+            </nuxt-link>
+          </li>
+          <li v-if="isWorkWell && authenticated">
+            <nuxt-link class="dark" to="/account">
+              <span>Account</span>
+            </nuxt-link>
+          </li>
+          <!-- end workwell login code -->
+          <li v-if="!isWorkWell && screen === 'desktop'" class="nav-item">
+            <nuxt-link class="dark" to="/search" @keydown.tab="resetTab">
+              <span class="search-string">Search</span>
+              <search-icon class="search-icon" />
+            </nuxt-link>
+          </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>
+          <li v-if="!isWorkWell">
+            <nuxt-link
+              ref="searchButton"
+              class="dark"
+              to="/search"
+              @keydown.tab="resetTab"
+            >
+              <span>Search</span>
+              <search-icon class="search-icon" />
+            </nuxt-link>
+          </li>
+          <li v-else class="nav-item hide">
+            <a ref="searchButton" role="button" @focus="resetTab"></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 v-if="isSearchOpen && !isWorkWell" class="search-container">
+        <modal-search
+          :search-query="searchQuery"
+          :content-parser="contentParser"
+          @closed="closeSearch"
+        />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import ModalSearch from './ModalSearch/index.vue'
+import Close from './../../../assets/icons/close.svg'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg'
+import CaretRight from './../../../assets/icons/caret-right.svg'
+import CaretDown from './../../../assets/icons/caret-down.svg'
+import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg'
+import CaretLeft from './../../../assets/icons/caret-left.svg'
+import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg'
+
+export default {
+  components: {
+    ModalSearch,
+    Close,
+    CaretRight,
+    CaretDown,
+    CaretLeft,
+    MenuIcon,
+    SearchIcon
+  },
+  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,
+      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
+    }
+  },
+  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
+        }
+      }
+    }
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.screenWidth)
+  },
+  created() {
+    if (typeof window !== 'undefined' && window) {
+      window.addEventListener('resize', this.screenWidth)
+      this.screenWidth()
+    }
+    if (this.$nuxt) {
+      this.$nuxt.$on('site-search', (query) => {
+        this.searchQuery = query
+        if (query) {
+          this.showSearch()
+        }
+      })
+    }
+  },
+  methods: {
+    screenWidth() {
+      this.windowWidth = window.innerWidth
+    },
+    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.$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(content) {
+      let payload = {
+        event: 'custom.interaction.megamenu.click',
+        group: 'Mega Menu',
+        label: content.title,
+        url: content.relative
+      }
+      // this.$store.dispatch('tracking/event', payload)
+    },
+    skipToContent() {
+      if (this.$nuxt) {
+        this.$nuxt.$emit('scrollToTop')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+@import './mobile';
+</style>