@worksafevictoria/wcl7.5 1.11.0 → 1.12.0

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

@@ -6,44 +6,54 @@
     >
       <!-- 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>
+        <!-- Mobile Menu -->
+        <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
+          <a class="dark" role="button" @click.prevent="showMobileMenu">
+            <menu-icon class="menu-icon" />
+          </a>
+        </div>
+        <!-- Logo -->
+        <nuxt-link class="dark" to="/">
+          <img
+            :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
+            :alt="
+              isWorkWell
+                ? 'Work Well Victoria - Logo'
+                : 'Work Safe Victoria - Logo'
+            "
+            :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
+          />
+        </nuxt-link>
+        <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
+          <!-- Roles added for accessibility -->
+          <table role="presentation" >
+            <tbody role="presentation">
+              <tr role="presentation">
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+                <!-- Language link -->
                 <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>
+                  :class="screen === 'mobile' ? 'mobile-link' : ''"
+                  to="/languages"
+                  @click.native="fireAnalytics('Choose your language', '/languages')"
+                  title="Language"
+                >
+                  <span v-if="screen !== 'mobile'">Choose your language </span>
+                  <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
+                </nuxt-link>
               </td>
-              <td>
-                <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
-                  <span v-if="!topLevelIconsOnly">Adjust contrast</span> <img alt="Contrast Icon" width="20px" height="20px" :src=ContrastIcon />
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+                <!-- Contrast link -->
+                <a href="javascript:void(0)" :class="screen === 'mobile' ? 'mobile-link' : ''" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
+                  <span v-if="screen !== 'mobile'">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
                 </a>
                 <div
                   ref="contrastChoices"
                   class="flex-container"
                   v-if="show"
                 >
-                  <div class="contrast_slide--box-list">
+                  <div class="flex-item contrast_slide--box-list">
                     <div v-for="list in lists" :key="list.value">
-                      <label>
+                      <label :class="{'last-radio': list.label==='Greyscale'}">
                         <input
                           type="radio"
                           :name="list.name"
@@ -57,20 +67,23 @@
                   </div>
                 </div>
               </td>
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+                <!-- Search link -->
                 <nuxt-link
+                  style="height: 40px;"
                   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 />
+                  ><span v-if="screen !== 'mobile'">Search  &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
                 </nuxt-link>
               </td>
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
+                <!-- Login link -->
                 <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>
+                  ><span v-if="screen !== 'mobile'">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
                 </nuxt-link>
               </td>
             </tr>
@@ -79,8 +92,9 @@
         </span>
       </div>
       <!-- Bottom menu -->
-      <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
-        <div class="app-header__close-button mobile-close">                 
+      <div class="app-header__wrap" :class="screen === 'mobile' ? 'app-header__wrap_mobile' : ''" @keyup.esc="closeMegaMenu">
+        <div class="app-header__close-button mobile-close">
+          <!-- Close Button -->
           <button
             v-if="
               (isMobileMenuOpen && screen === 'mobile' && !isSecondLevelOpen)
@@ -93,15 +107,7 @@
               Close menu
           </button>
         </div>
-        <div
-          v-if="
-            (!isSecondLevelOpen && screen === 'desktop') ||
-            (!isMobileMenuOpen && screen === 'mobile')
-          "
-          class="app-header__app-branding"
-        >
-          
-        </div>
+        <!-- Bottom menu Items -->
         <nav
           v-if="isMobileMenuOpen || screen === 'desktop'"
           :class="{
@@ -151,6 +157,7 @@
               >
                 <span>{{ firstLevelLink.title }}</span>
               </nuxt-link>
+              <!-- Sub-Menu 2nd Level -->
               <div v-if="isSecondLevelOpen" class="sub-nav-container">
                 <div class="app-header__close-button">
                   <button
@@ -187,6 +194,7 @@
                         screen === 'mobile' && isSecondLevelOpen,
                     }"
                   >
+                    <!-- Selected Title -->
                     <div
                       class="selected-title"
                       :class="{ 'selected-title--chrome': isChrome }"
@@ -203,6 +211,7 @@
                       </nuxt-link>
                       <span v-else>{{ firstLevelLink.title }}</span>
                     </div>
+                    <!-- Selected Items -->
                     <div class="selected-items">
                       <ul v-if="firstLevelLink.below" class="sub-nav-group">
                         <li
@@ -252,6 +261,7 @@
                           >
                             <span>{{ secondLevelLink.title }}</span>
                           </nuxt-link>
+                          <!-- Sub Menu - Third Level Menu -->
                           <div v-if="isThirdLevelOpen" class="sub-nav">
                             <div class="sub-nav__wrap">
                               <div class="selected-title">
@@ -311,255 +321,18 @@
                 </div>
               </div>
             </li>
-
-            <!-- More action button in bottom menu -->
-
-            <li class="nav-item" 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" 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="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="`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="!(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 && screen === 'desktop'" class="nav-item hide">
               <a href="#" class="dark" @focus="resetTab"></a>
             </li>
-          </ul>
- 
-          
+          </ul>  
         </nav>
-        <div v-if="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'
@@ -579,16 +352,11 @@ 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,
@@ -619,8 +387,6 @@ export default {
   data() {
     return {
       screen: null,
-      topLevelIconsOnly: false,
-      topLevelButtonIconsOnly: false,
       isMobileMenuOpen: false,
       isSecondLevelOpen: false,
       isThirdLevelOpen: false,
@@ -694,25 +460,10 @@ export default {
           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()
+  
     let selectedMode = document
       .getElementById('contrastStyle')
       ?.getAttribute('data-sel')
@@ -725,8 +476,7 @@ export default {
     window.removeEventListener('scroll', this.resetContrast)
   },
   destroyed() {
-    window.removeEventListener('resize', this.screenWidth),
-    window.removeEventListener('resize', this.updateMoreMenu)
+    window.removeEventListener('resize', this.screenWidth);
   },
   created() {
     if (typeof window !== 'undefined' && window) {
@@ -746,64 +496,29 @@ export default {
     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)
+      if (window && window.scrollTo && this.screen === "desktop") {
+        window.scrollTo(0, 0);
       }
 
-      let selectedItem = this.$refs[ref][0]
-      let previouslyOpenItem = this.getActiveParent()
+      let selectedItem = this.$refs[ref][0];
+      let previouslyOpenItem = this.getActiveParent();
 
       // Set this for mobile
-      this.firstLevelItemName = item.title
-      this.firstLevelItemRef = ref
-      
+      this.firstLevelItemName = item.title;
+      this.firstLevelItemRef = ref;
+
       // Set the first item to the variable
       if (previouslyOpenItem.length) {
-        previouslyOpenItem = previouslyOpenItem[0]
+        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)
+        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
@@ -812,33 +527,29 @@ export default {
         this.isSecondLevelOpen === true &&
         selectedItem === previouslyOpenItem
       ) {
-        selectedItem.classList.remove('isActiveParent')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isSecondLevelOpen = false
-        this.letBodyOverflow(true)
+        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)
+        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.classList.remove("isActiveParent");
+        selectedItem.classList.add("isActiveParent");
         previouslyOpenItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
+          .getElementsByTagName("a")[0]
+          .setAttribute("aria-expanded", "false");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
       }
-      if (this.screen === 'mobile') {
-        this.focusOnNext(selectedItem)
+      if (this.screen === "mobile") {
+        this.focusOnNext(selectedItem);
       }
     },
     secondLevelClick(item, ref) {
@@ -902,7 +613,6 @@ export default {
 
       this.isMobileMenuOpen = true
       this.letBodyOverflow(false)
-      // this.showMore = false
       this.$nextTick(() => {
         this.$refs['firstLevelMenuItem-0'][0].firstElementChild.focus()
       })
@@ -1194,7 +904,8 @@ export default {
       if (this.show) {
         this.show = !this.show
       }
-    }
+    },
+    
   },
 }
 </script>