Header Vue: Subsite Devmiun

const OFFSET = 60

Vue.component("headervue", {
  props: [
    "fetchMenuUrl",
    "pageId",
    "querySearchUrl",
    "subsite",
    "subsiteBackUrl",
    "subsiteBackText",
    "subsiteTitle",
    "goBackText",
    "favoritesLinktext",
    "favoritesOpentext",
    "favoritesClosetext",
    "favoritesRemovetext",
    "subSiteRootUrl"
  ],
  data() {
    return {
      fLinktext: this.favoritesLinktext,
      fOpentext: this.favoritesOpentext,
      fClosetext: this.favoritesClosetext,
      fRemovetext: this.favoritesRemovetext,
      showFav: false,
      showFavBar: false,
      showMenu: false,
      userWantsToSearch: false,
      userWantsToOpenMenu: false,
      userWantsToOpenTools: false,
      userWantsToOpenUserMenu: false,
      data: "",
      userNav: "",
      toolsNav: "",
      url: "",
      activeItems: [],
      menuItems: [],
      menuTwo: [],
      menuThree: [],
      menuFour: [],
      subsiteObj: {},
      menuLoading: false,
      searchUrl: this.querySearchUrl,
      showNavbar: true,
      fetchLoading: false,
      lastScrollPosition: 0,
      scrollValue: 0,
      userWantsToSearchMobile: false,
      mobileSearchHits: "",
      mobileQuery: "",
      userWantsToOpenMenuMobile: "",
      userWantsToSearchScrolledMobile: false,
    };
  },
  mounted() {
    if (document.getElementById("header-vue") && this.fetchMenuUrl) {
      console.log({ "favoritesLinktext": this.favoritesLinktext })
      console.log({ "favoritesOpentext": this.favoritesOpentext })
      console.log({ "favoritesClosetext": this.favoritesClosetext })
      console.log({ "favoritesRemovetext": this.favoritesRemovetext })

      this.lastScrollPosition = window.pageYOffset
      window.addEventListener('scroll', this.onScroll)
      const viewportMeta = document.createElement('meta')
      viewportMeta.name = 'viewport'
      viewportMeta.content = 'width=device-width, initial-scale=1'
      document.head.appendChild(viewportMeta)
      if (
        this.subsite &&
        this.subsiteBackUrl &&
        this.subsiteBackText &&
        this.subsiteTitle
      ) {
        this.subsiteObj.subsite = this.subsite;
        this.subsiteObj.subSiteRootUrl = this.subSiteRootUrl;
        this.subsiteObj.subsiteBackUrl = this.subsiteBackUrl;
        this.subsiteObj.subsiteBackText = this.subsiteBackText;
        this.subsiteObj.subsiteTitle = this.subsiteTitle;
      }
      this.getAttributes();
      this.url = this.fetchMenuUrl;
      this.searchUrl = this.querySearchUrl;
      this.currentPageId = this.pageId;
      this.fetchMenuItems(this.url, this.currentPageId);
    }
    window.addEventListener('scroll', this.stickyHeader);
  },
  destroyed() {
    window.removeEventListener('scroll', this.stickyHeader);
  },
  filters: {
    initials: function (value) {
      if (!value) return "";
      value = value.toString();
      var initials = value
        .split(" ")
        .map(n => n[0])
        .join("");
      return initials;
    },
    capitalize: function (value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    stickyHeader() {
      var body = document.getElementsByTagName("body")[0];

      if (window.pageYOffset > 50) {
        body.classList.add("sticky");
      } else {
        body.classList.remove("sticky");
      }
    },
    async fetchMenuItems(url, pageId) {
      try {
        this.menuLoading = true;
        this.fetchLoading = true;

        const res = await axios.post(url, {
          id: pageId
        });
        console.log({ resMenu: res })

        this.menuItems = res.data.menuOne;

        if (res.data.activePath.length > 0) {
          this.activeItems = res.data.activePath;
        }
        if (res.data.menuTwo) {
          this.menuTwo = res.data.menuTwo;
        }
        if (res.data.menuThree) {
          this.menuThree = res.data.menuThree;
        }
        if (res.data.menuFour) {
          this.menuFour = res.data.menuFour;
        }
        this.menuLoading = false;
        this.fetchLoading = false;
      } catch (error) {
      }
    },
    searchMobileToggle() {
      this.userWantsToSearchMobile = !this.userWantsToSearchMobile;
      if (this.userWantsToSearchMobile) {
        this.$nextTick(function () {
          if (this.$refs.searchnotscrolled) {
            this.$refs.searchnotscrolled.focus();
          }
        });
      }
      this.userWantsToOpenTools = false;
      this.userWantsToOpenMenu = false;
      this.userWantsToOpenMenuMobile = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
    },
    searchMobileScrolledToggle() {
      this.userWantsToSearchScrolledMobile = !this
        .userWantsToSearchScrolledMobile;
      if (this.userWantsToSearchScrolledMobile) {
        this.$nextTick(function () {
          this.$refs.searchscrolled.focus();
        });
      }
      this.userWantsToSearchMobile = false;
      this.userWantsToOpenTools = false;
      this.userWantsToOpenMenu = false;
      this.userWantsToOpenMenuMobile = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
    },
    searchMobileScrollDown() {
      this.showNavbar = true
    },
    menuMobileToggle() {
      this.userWantsToOpenMenuMobile = !this.userWantsToOpenMenuMobile;
      var body = document.body;
      if (this.userWantsToOpenMenuMobile) {
        this.clearMobileSearch();
        body.classList.add("noscroll");
        body.classList.add("noscroll-menu");
      } else {
        body.classList.remove("noscroll");
        body.classList.remove("noscroll-menu");
      }
      this.userWantsToOpenTools = false;
      this.mobileSearchHits = false;
      this.userWantsToSearchMobile = false;
      this.userWantsToSearch = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
    },
    searchToggle() {
      this.userWantsToSearch = !this.userWantsToSearch;
      this.userWantsToOpenTools = false;
      this.userWantsToOpenMenu = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
    },
    toolsToggle() {
      var body = document.body;

      this.userWantsToOpenTools = !this.userWantsToOpenTools;
      if (this.userWantsToOpenTools) {
        body.classList.add("noscroll");
      } else {
        body.classList.remove("noscroll");
      }
      this.userWantsToSearch = false;
      this.userWantsToOpenMenu = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
    },
    showFavBox() {
      this.showFav = !this.showFav
      this.userWantsToSearch = false;
      this.userWantsToSearchMobile = false;
      this.userWantsToOpenTools = false;
      this.userWantsToOpenMenu = false;
      this.userWantsToOpenMenuMobile = false;
      this.userWantsToOpenUserMenu = false;
    },
    menuToggle() {
      this.userWantsToOpenMenu = !this.userWantsToOpenMenu;
      this.userWantsToOpenMenuMobile = !this.userWantsToOpenMenuMobile;
      this.userWantsToOpenTools = false;
      this.userWantsToSearch = false;
      this.userWantsToOpenUserMenu = false;
      this.showFav = false;
      var body = document.body;
      if (this.userWantsToOpenMenu || this.userWantsToOpenMenuMobile) {
        body.classList.add("noscroll-menu");
      } else {
        body.classList.remove("noscroll-menu");
      }

    },
    toggleUserMenu() {
      var body = document.body;
      this.userWantsToOpenUserMenu = !this.userWantsToOpenUserMenu;
      if (this.userWantsToOpenUserMenu) {
        body.classList.add("noscroll");
      } else {
        body.classList.remove("noscroll");
      }
      this.userWantsToOpenTools = false;
      this.userWantsToSearch = false;
      this.userWantsToOpenMenu = false;
    },
    mobileSubmit: function (e) {
      e.preventDefault();
      window.location.href = `/sok/?=&querytext=${this.mobileQuery}`;
    },
    getAttributes() {
      const page = document.getElementById("header-vue");
      const json = JSON.parse(page.getAttribute("json"));


      this.userNav = json.userNav;
      this.toolsNav = json.toolsNav;
      this.data = json;
    },
    clearMobileSearch() {
      this.mobileQuery = "";
      this.mobileSearchHits = "";
      this.userWantsToSearchMobile = false;
    },
    timeout(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    browseFavorites() {
      this.openFavorites = !this.openFavorites;
    },
    removeFavourite(pageId) {
      return this.$root.removeFavourite(pageId);
    },
    onFavouriteDrag(event) {
      return this.$root.favouritesUpdated(event);
    },
    async queryAutoComplete(data) {
      if (typeof data === "string") {
        if (data.length >= 2) {
          this.loading = true;
          await this.timeout(1000);
          try {
            const response = await fetch(
              this.searchUrl + data + "?size=5"
            ).then(response => response.json());

            if (response.Hits) {
              this.mobileSearchHits = response.Hits;
            }
            this.loading = false;
          } catch (error) {
          }
        } else {
          this.mobileSearchHits = "";
        }
      }
    }
  },
  template: `
      <header class="container-fluid m-header">
        <nav id="fav-navigation" v-cloak class="row">
              <ul>
                  <li class="my-courses">
                      <cartcomponent :cart-url="data.cartUrl"></cartcomponent>
                  </li>
                  <li class="favorites">
                      <a href="javascript:void(0)" :aria-label="fOpentext" @click="showFavBox"><span class="material-icons">favorite</span><strong class="d-none d-md-block">{{fLinktext}}</strong></a>
                      <transition name="slide-fade" mode="out-in">
                        <div id="fav-list" v-if="showFav">
                            <a href="javascript:void(0)" :aria-label="fClosetext"  class="fav-close" @click="showFav = !showFav"></a>
                            <div class="fav-head">{{fLinktext}}</div>
                            <draggable class="favorite-links" :list="this.$root.shared.favourites" @change="onFavouriteDrag">
                              <div class="favorite-link" v-for="(item, index) in this.$root.shared.favourites" :key="index">
                                <i class="material-icons sortFavIcon">view_headline</i>
                                <a class="pagetitle" :aria-label="item.pageTitle"  :href="item.pageUrl">{{item.pageTitle}}</a>
                                <i class="material-icons removeFavIcon c-pointer" @click="removeFavourite(item.pageId)" :aria-label="fRemovetext"  >close</i>
                              </div>
                            </draggable>
                        </div>
                      </transition>
                  </li>
                  <li v-if="data">
                    <a :href="data.languageLink.linkUrl" class="m-globe" :aria-label="data.languageLink.linkText">
                      <i class="material-icons">{{data.languageLink.linkIcon}}</i>
                      <strong class="d-none d-md-block">
                        {{data.languageLink.linkText}}
                      </strong>
                    </a>
                  </li>
              </ul>
        </nav>
        <nav class="row m-nav main-navigation " v-if="data">
        
            <div class="col-4 align-self-center m-left">
                <a class="m-link m-hamburger" href="javascript:void(0);" @click="menuToggle" :aria-label="data.menuButton.text">
                    <i class="material-icons">{{data.menuButton.icon}}</i>
                    <span>{{data.menuButton.text}}</span>
                </a>
                <a href="javascript:void(0)" :aria-label="data.searchButton.text" @click="searchToggle" v-if="data.searchButton.icon && data.searchButton.text" class="m-link m-search d-xs-flex d-md-none">
                    <i class="material-icons">{{data.searchButton.icon}}</i>
                    <span>
                      {{data.searchButton.text}}
                    </span>
                </a>
            </div>
            <transition name="fade" mode="out-in">
                <menu-popup :activeLinks="activeItems" :theMenuTwo="menuTwo" :theMenuThree="menuThree" :theMenuFour="menuFour" :subsite="subsiteObj" class="d-none d-md-flex w-100" :url="url" :loading="menuLoading" :items="menuItems" @closePopup="menuToggle" v-if="userWantsToOpenMenu" />
            </transition>

            <div class="col-4 align-self-center m-mid text-center">
                <a class="navbar-brand" :href="data.logo.logoLinkUrl" :title="data.logo.logoAltText" :aria-label="data.logo.logoAltText">
                    <img :src="data.logo.logoImageUrl" :alt="data.logo.logoAltText" :width="'170'" class="d-inline-block align-top" />
                </a>
            </div>
            <div class="col-4  align-self-center m-right">
                <a href="javascript:void(0);" :aria-label="data.searchButton.text" @click="searchToggle" v-if="data.searchButton.icon && data.searchButton.text" class="m-link m-search d-none d-md-flex">
                    <i class="material-icons">{{data.searchButton.icon}}</i>
                    <span>
                      {{data.searchButton.text}}
                    </span>
                </a>
                <a href="javascript:void(0);" :aria-label="data.toolsButton.text" @click="toolsToggle" v-if="data.isLoggedIn && data.toolsButton.icon && data.toolsButton.text" class="m-link m-tool">
                    <i class="material-icons">{{data.toolsButton.icon}}</i>
                    <span>
                      {{data.toolsButton.text}}
                    </span>
                </a>
                
                <a :href="data.loginLink.linkUrl" :aria-label="data.loginLink.linkText" v-if="!data.isLoggedIn && data.loginLink.linkIcon && data.loginLink.linkText && data.loginLink.linkUrl" class="m-link m-user">
                    <i class="material-icons">{{data.loginLink.linkIcon}}</i>
                    <span>
                      {{data.loginLink.linkText}}
                    </span>
                </a>
                <button :aria-label="data.userButton.initials" class="user-button" @click="toggleUserMenu" v-if="data.isLoggedIn && data.userButton && data.userButton.color && data.userButton.initials && data.userButton.url" :class="data.userButton.color">
                    {{data.userButton.initials}}
                </button>
                <transition name="slide-fade" mode="out-in">
                <tools-popup @closePopup="toolsToggle" v-if="userWantsToOpenTools && data.toolsNav.length > 0"
                    :navigation="toolsNav" />
              </transition>
              <transition name="slide-fade" mode="out-in">
                <user-popup @closePopup="toggleUserMenu" :userNavItems="userNav"
                    v-if="userNav && userWantsToOpenUserMenu " />
              </transition>
            </div>

            <transition name="fade" mode="out-in">
                <search-popup :placeholderText="data.searchButton.placeholder" :url="searchUrl" @closePopup="searchToggle" v-if="userWantsToSearch" />
            </transition>
        </nav>
        <template v-if="userWantsToSearchMobile">
          <div class="row mobile--search--top " v-if="userWantsToSearchMobile">
            <div class="col-12">
              <div class="d-flex flex-row align-items-center">
                <form  @submit="mobileSubmit" class="flex-grow-1">
                  <input autofocus ref="searchnotscrolled" v-model="mobileQuery" @input="queryAutoComplete($event.target.value)" placeholder="Skriv in sökord"  type="text">
                </form>
                <button class="close--mobile--search--button" @click="clearMobileSearch">
                <span class="material-icons">clear</span>
              </button>
              </div>
            </div>
          </div>
          <div :class="{ 'navbar--hidden': !showNavbar }" class="mobile--search--results row" v-if="mobileSearchHits.length > 0 && userWantsToSearchMobile && mobileQuery.length > 2">
            <div class="w-100">
              <ul class="list-unstyled mb-0">
                  <a :key="item.Query" :aria-label="item.Query" v-for="(item, index) in mobileSearchHits" :href="'/sok/?=&querytext='+item.Query">{{item.Query | capitalize}}</a>
              </ul>
            </div>
          </div>
        </template>

        <transition name="fade" mode="out-in">
          <menu-popup-mobile :goBackText="goBackText" :loadingText="data.menuButton.loadingText" :activeLinks="activeItems" :theMenuTwo="menuTwo" :theMenuThree="menuThree"
              :theMenuFour="menuFour" :subsite="subsiteObj" :url="url" :loading="menuLoading"
              :items="menuItems" @closePopup="menuMobileToggle" v-if="userWantsToOpenMenuMobile" />
        </transition>
      </header>
    `
});

Vue.component("search-popup", {
  data() {
    return {
      query: "",
      hits: "",
      loading: false
    };
  },

  props: ["url", "placeholderText"],
  filters: {
    capitalize: function (value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  methods: {
    closeEvent() {
      this.$emit("closePopup");
    },
    submitQuery: function (e) {
      e.preventDefault();
      if (this.query.length > 0) {
        window.location.href = `/sok/?=&querytext=${this.query}`;
      }
    },
    async queryAutoComplete(data) {
      if (typeof data === "string") {
        if (data.length >= 2) {
          this.loading = true;
          try {

            const response = await axios.get(this.url + data + "?size=5");

            if (response.data.Hits) {
              this.hits = response.data.Hits;
            }
            this.loading = false;
          } catch (error) { }
        } else {
          this.hits = "";
        }
      }
    }
  },
  template: `
    <div class="d-flex flex-column m-search-popup w-100" >
      <form class="search--popup d-flex flex-row align-items-center" @submit="submitQuery">
        <input autofocus  @input="queryAutoComplete($event.target.value)" @change="queryAutoComplete($event)" v-model="query" :placeholder="placeholderText ? placeholderText : 'Vad letar du efter?'" />
        
        <div class="search--popup--btn--container hideonmobile">
            <button aria-label="Sök" type="submit">
                <span class="material-icons">search</span>
            </button>
        </div>
        <div class="stroke-container">
          <div class="stroke"></div>
        </div>
        <div class="search--popup--btn--container ">
            <button aria-label="Stäng sök" type="button" @click="closeEvent">
                <span class="material-icons">clear</span>
            </button>
        </div>
      </form>
      <transition name="fade" mode="out-in">
        <div class="d-flex align-items-center flex-column hits--container" v-if="hits">
            <transition name="fade" mode="out-in">
              <div key="1" v-if="loading" class="d-flex flex-row align-items-center pt-2 pb-2">
                <vloading :height="32" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
              </div>
              <ul key="2" v-else class="list-unstyled mb-0">
                <a :key="item.Query" :aria-label="item.Query" v-for="(item, index) in hits" :href="'/sok/?=&querytext='+item.Query">
                  {{item.Query | capitalize}}
                </a>
              </ul>
            </transition>
        </div>
      </transition>
    </div>
    `
});
Vue.component("tools-popup", {
  props: ["navigation"],
  methods: {
    closeEvent() {
      this.$emit("closePopup");
    }
  },
  mounted() {
    console.log({ "navigation": this.navigation })
  },
  computed: {
    orderToolsAlphabetical: function () {
      return this.navigation;
    }
  },
  template: `
      <div class="tools--popup d-flex flex-column">
          <div class="d-flex w-100 flex-row justify-content-end">
              <button aria-label="Stäng verktyg" @click="closeEvent">
                  <span class="material-icons">clear</span>
              </button>
          </div>
          
            <ul class="d-flex list-unstyled flex-row flex-wrap justify-content-between tools--popup--ul">
                <li v-for="(i, index) in orderToolsAlphabetical" :key="index" class="tools-li  d-flex flex-row align-items-center justify-content-center">
                    <a target="_blank" :href="i.linkUrl" :aria-label="i.linkText" class="tool-item d-flex flex-column  justify-content-start" :class="i.linkCustomClass">
                        <i class="fa" :class="i.linkIcon"></i>
                        <span>
                          {{i.linkText}}
                        </span>
                    </a>
                </li>
            </ul>
          
      </div>
    `
});
Vue.component("user-popup", {
  props: ["userNavItems"],
  data() {
    return {
      openFavorites: false,
      favs: []
    };
  },
  methods: {
    closeEvent() {
      this.$emit("closePopup");
    }
  },
  template: `
      <div class="user--popup d-flex flex-column">
        <div class="d-flex flex-row justify-content-end">
          <transition name="slide-fade-back" mode="out-in">
            <button aria-label="Öppna favoriter" class="btn-close d-flex flex-row align-items-center" @click="browseFavorites" v-if="this.openFavorites">
                <span class="material-icons back-btn">arrow_back_ios</span>
            </button>
          </transition>
            <button aria-label="Stäng meny" class="ml-auto btn-close" @click="closeEvent">
                <span class="material-icons">clear</span>
            </button>
        </div>
        <transition name="slide-fade" mode="out-in">
          <ul key="1" class="mb-0 d-flex list-unstyled flex-column" v-if="this.userNavItems && !this.openFavorites">
              <li class="user-li" v-if="this.userNavItems.personalSiteLink">
                <a :aria-label="this.userNavItems.personalSiteLink.linkText" :href="this.userNavItems.personalSiteLink.linkUrl" class="favorites--links">
                  <i class="material-icons">{{this.userNavItems.personalSiteLink.linkIcon}}</i>
                  <span>
                    {{this.userNavItems.personalSiteLink.linkText}}
                  </span>
                </a>
              </li>
              <li class="user-li" v-if="this.userNavItems.settingsLink" >
                <a :aria-label="this.userNavItems.settingsLink.linkText" :href="this.userNavItems.settingsLink.linkUrl" class="favorites--links">
                  <i class="material-icons">{{this.userNavItems.settingsLink.linkIcon}}</i>
                  <span>
                    {{this.userNavItems.settingsLink.linkText}}
                  </span>
                </a>
              </li>
              <li class="user-li" >
                <a :aria-label="this.userNavItems.languageLink.linkText" :href="this.userNavItems.languageLink.linkUrl" class="favorites--links">
                  <i class="material-icons">{{this.userNavItems.languageLink.linkIcon}}</i>
                  <span>
                    {{this.userNavItems.languageLink.linkText}}
                  </span>
                </a>
              </li>
              <li class="user-li mt-4" >
                <a :aria-label="this.userNavItems.logoutLink.linkText" :href="this.userNavItems.logoutLink.linkUrl" class="button-default text-white">
                  {{this.userNavItems.logoutLink.linkText}}
                </a>
              </li>
          </ul>
          </transition>
      </div>
    `
});
Vue.component("menu-popup", {
  props: [
    "items",
    "loading",
    "url",
    "subsite",
    "theMenuTwo",
    "theMenuThree",
    "theMenuFour",
    "activeLinks",
    "goBackText",
    "loadingText"
  ],
  data() {
    return {
      menuOne: [],
      menuTwo: [],
      menuThree: [],
      menuFour: [],
      activeItems: [],
      loadChildrens: false
    };
  },
  mounted() {
    if (this.activeLinks) {
      this.activeItems = this.activeLinks;
    }
    if (this.theMenuTwo) {
      this.menuTwo = this.theMenuTwo;
    }
    if (this.theMenuThree) {
      this.menuThree = this.theMenuThree;
    }
    if (this.theMenuFour) {
      this.menuFour = this.theMenuFour;
    }
  },
  methods: {
    closeEvent() {
      this.$emit("closePopup");
    },
    async fetchSecondMenu(pageId) {
      $('#expandable-menu').animate({ scrollTop: (0) }, 'slow');
      try {
        this.loadChildrens = true;
        this.menuTwo = [];
        this.menuThree = [];
        this.menuFour = [];

        const response = await axios.post(this.url, {
          id: pageId
        })

        if (response.data.menuOne && response.data.menuTwo) {
          this.activeItems = response.data.activePath;
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
        }
        if (response.data.menuOne && response.data.menuTwo && response.data.menuThree) {
          this.activeItems = response.data.activePath;
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
          this.menuThree = response.data.menuThree;
        }
        if (
          response.data.menuOne &&
          response.data.menuTwo &&
          response.data.menuThree &&
          response.data.menuFour
        ) {
          this.activeItems = response.data.activePath;
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
          this.menuThree = response.data.menuThree;
          this.menuFour = response.data.menuFour;
        }
        this.loadChildrens = false;
      } catch (error) {
        this.loadChildrens = false;
      }
    },
    async fetchThirdMenu(pageId) {
      $('#expandable-menu').animate({ scrollTop: (0) }, 'slow');
      try {
        this.loadChildrens = true;


        const response = await axios.post(this.url, {
          id: pageId
        })

        this.activeItems = response.data.activePath;
        this.menuOne = response.data.menuOne;
        this.menuTwo = response.data.menuTwo;
        this.menuThree = response.data.menuThree;
        this.menuFour = [];
        this.loadChildrens = false;
      } catch (error) {
        this.loadChildrens = false;
      }
    },
    async fetchFourthMenu(pageId) {
      $('#expandable-menu').animate({ scrollTop: (0) }, 'slow');
      try {
        this.loadChildrens = true;

        const response = await axios.post(this.url, {
          id: pageId
        })

        this.activeItems = response.data.activePath;
        this.menuOne = response.data.menuOne;
        this.menuTwo = response.data.menuTwo;
        this.menuThree = response.data.menuThree;
        this.menuFour = response.data.menuFour;
        this.loadChildrens = false;
      } catch (error) {
        this.loadChildrens = false;
      }
    }
  },
  template: `
<div class="menu--popup " @click="closeEvent" >
  
    <div class="menu--container vld-parent w-100 d-flex flex-column" @click.stop>
      
      <vloading :color="'#404040'" :is-full-page="false" :active.sync="loadChildrens"></vloading>
          <div class="d-flex w-100 flex-row">
              <button @click="closeEvent" class="close--button">
                  <span class="material-icons">clear</span>
              </button>
          </div>
          <transition name="fade" mode="out-in">
            <div key="1" id="expandable-menu" class="menu--navs d-flex w-100 flex-row" v-if="!loading && items">
                  <ul class="list-unstyled menu--navs-col menu-list column-one">
                    <template v-if="subsite && subsite.subsite">
                      <li class="menu-item d-flex flex-row align-items-center root-link" v-if="subsite.subsiteBackText && subsite.subsiteBackUrl">
                          <span class="material-icons icon-back">keyboard_arrow_left</span>
                          <a :aria-label="subsite.subsiteBackText" class="menu-link menu-back d-flex flex-row align-items-center" :href="subsite.subsiteBackUrl">
                            {{subsite.subsiteBackText}}
                          </a>
                        </li>
                        <li class="menu-item d-flex flex-row align-items-center active  root-link" v-if="subsite.subsiteTitle">
                          <a :aria-label="subsite.subsiteTitle" class="menu-link  mb-0" :href="subsite.subSiteRootUrl">
                          {{subsite.subsiteTitle}}
                          </a>
                      </li>
                    </template>
                    <template v-for="(item, index) in items" >
                      <button :aria-label="item.displayName" @click="fetchSecondMenu(item.pageId)" :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                          <p class="menu-link mb-0" >{{item.displayName}}</p>
                          <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                      </button>
                      <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center" v-else>
                        <span  class="menu-link" >{{item.displayName}}</span>
                      </a>
                    </template>
                  </ul>

                <transition name="fade" mode="out-in">
                  <ul class="list-unstyled menu--navs-col menu-list column-two" v-if="menuTwo.length > 0">
                    <template v-for="(item,index) in menuTwo" >
                      <button :aria-label="item.displayName" @click="fetchThirdMenu(item.pageId) " :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                          <p class="menu-link mb-0" >{{item.displayName}}</p>
                          <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                      </button>
                      <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center" v-else>
                        <span  class="menu-link" >{{item.displayName}}</span>
                      </a>
                    </template>
                  </ul>
                </transition>

                <transition name="fade" mode="out-in">
                  <ul class="list-unstyled menu--navs-col menu-list column-three" v-if="menuThree.length > 0">
                    <template v-for="(item,index) in menuThree" >
                      <button :aria-label="item.displayName" @click="fetchFourthMenu(item.pageId)" :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                          <p class="menu-link mb-0" >{{item.displayName}}</p>
                          <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                      </button>
                      <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center" v-else>
                        <span  class="menu-link" >{{item.displayName}}</span>
                      </a>
                    </template>
                  </ul>
                </transition>
                <transition name="fade" mode="out-in">
                  <ul class="list-unstyled menu--navs-col menu-list column-three" v-if="menuFour.length > 0">
                
                      <a :aria-label="item.displayName" :href="item.url" v-for="(item,index) in menuFour" :key="index" :class="{'active-blue': activeItems.includes(item.pageId) && !item.isParent}" class="menu-item d-flex flex-row align-items-center" >
                        <span  class="menu-link" >{{item.displayName}}</span>
                      </a>
                  </ul>
                </transition>

            </div>

          </transition>
    </div>
</div>
    `
});
Vue.component("menu-popup-mobile", {
  props: [
    "items",
    "loading",
    "url",
    "subsite",
    "theMenuTwo",
    "theMenuThree",
    "theMenuFour",
    "activeLinks",
    "goBackText",
    "loadingText"
  ],
  data() {
    return {
      menuOne: [],
      menuTwo: [],
      menuThree: [],
      menuFour: [],
      activeItems: [],
      currentIndex: 1,
      selectedPageId: 0,
      loadChildrens: false,
      load: this.loading
    };
  },
  created() {
    if (this.activeLinks !== undefined) {
      this.currentIndex = this.activeLinks.length
    }
  },
  mounted() {
    if (this.activeLinks !== undefined) {
      this.activeItems = this.activeLinks;
      this.selectedPageId = this.activeItems[Object.keys(this.activeItems).length - 1];
    }

    if (this.theMenuTwo) {
      this.menuTwo = this.theMenuTwo;
    }
    if (this.theMenuThree) {
      this.menuThree = this.theMenuThree;
    }
    if (this.theMenuFour) {
      this.menuFour = this.theMenuFour;
    }
    console.log(this.activeItems, this.selectedPageId, this.currentIndex);
    console.log(this.menuTwo, this.menuThree, this.menuFour);
  },
  methods: {
    closeEvent() {
      this.$emit("closePopup");
    },
    goBack() {
      this.currentIndex--;
    },
    async fetchSecondMenu(pageId) {
      try {
        this.loadChildrens = true;
        this.menuTwo = [];
        this.menuThree = [];
        this.menuFour = [];


        const response = await axios.post(this.url, {
          id: pageId
        })

        if (response.data.menuOne && response.data.menuTwo) {
          this.currentIndex++;
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
        }
        if (response.data.menuOne && response.data.menuTwo && response.data.menuThree) {
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
          this.menuThree = response.data.menuThree;
        }
        if (
          response.data.menuOne &&
          response.data.menuTwo &&
          response.data.menuThree &&
          response.data.menuFour
        ) {
          this.menuOne = response.data.menuOne;
          this.menuTwo = response.data.menuTwo;
          this.menuThree = response.data.menuThree;
          this.menuFour = response.data.menuFour;
        }
        this.loadChildrens = false;
      } catch (error) { this.loadChildrens = false; }
    },
    async fetchThirdMenu(pageId) {
      try {
        this.loadChildrens = true;
        const response = await axios.post(this.url, {
          id: pageId
        })

        this.currentIndex++;
        this.menuOne = response.data.menuOne;
        this.menuTwo = response.data.menuTwo;
        this.menuThree = response.data.menuThree;
        this.loadChildrens = false;
      } catch (error) { this.loadChildrens = false; }
    },
    async fetchFourthMenu(pageId) {
      try {
        this.loadChildrens = true;
        const response = await axios.post(this.url, {
          id: pageId
        })
        this.currentIndex++;
        this.menuOne = response.data.menuOne;
        this.menuTwo = response.data.menuTwo;
        this.menuThree = response.data.menuThree;
        this.menuFour = response.data.menuFour;
        this.loadChildrens = false;
      } catch (error) { this.loadChildrens = false; }
    }
  },
  template: `
      <div class="menu--popup--mobile vld-parent" @click="closeEvent" >
          <div class="menu--container d-flex flex-column" @click.stop>
            <vloading :color="'#404040'" :is-full-page="false" :active.sync="loadChildrens"></vloading>
              <div class="d-flex w-100 flex-row close-mobile">
                  <button aria-label="Stäng meny" @click="closeEvent" class="btn-transparent">
                      <span class="material-icons">clear</span>
                  </button>
              </div>
              <transition name="fade" mode="out-in">
                <div key="1" class="menu--navs d-flex w-100 flex-row" v-if="!load && this.items">  
                    <transition name="slide-mobile" mode="out-in">
                        <ul key="1" class="list-unstyled menu--navs-col menu-list column-one" v-if="currentIndex < 2">
                          <template v-if="this.subsite && this.subsite.subsite">
                            <li class="menu-item d-flex flex-row align-items-center " v-if="this.subsite.subsiteBackText && this.subsite.subsiteBackUrl">
                                <span class="material-icons icon-back">keyboard_arrow_left</span>
                                <a :aria-label="this.subsite.subsiteBackText" class="menu-link menu-back d-flex flex-row align-items-center" :href="this.subsite.subsiteBackUrl">
                                  {{this.subsite.subsiteBackText}}
                                </a>
                              </li>
                              <li class="menu-item d-flex flex-row align-items-center" v-if="this.subsite.subsiteTitle">
                                <a :aria-label="this.subsite.subsiteTitle" class="menu-link mb-0" :href="this.subsite.subSiteRootUrl">
                                  {{this.subsite.subsiteTitle}}
                                </a>
                            </li>
                          </template>
                            <template v-for="(item, index) in this.items" >
                              <li @click="fetchSecondMenu(item.pageId)" :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.filter(e => e === item.pageId).length > 0}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                                  <p class="menu-link mb-0" >{{item.displayName}}</p>
                                  <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                              </li>
                              <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{active: selectedPageId == item.pageId}" class="menu-item d-flex flex-row align-items-center" v-else>
                                <span  class="menu-link" >{{item.displayName}}</span>
                              </a>
                            </template>
                        </ul>
                        <ul key="2" class="list-unstyled menu--navs-col menu-list column-two" v-if="this.menuTwo.length > 0 && currentIndex == 2">
                          <li @click="goBack()" class="menu-item d-flex flex-row align-items-center " >
                              <span class="material-icons ml-2 icon-back">keyboard_arrow_left</span>
                              <a :aria-label="this.goBackText" class="menu-link menu-back d-flex flex-row align-items-center" >
                                {{this.goBackText}}
                              </a>
                            </li>
                              <template v-for="(item,index) in this.menuTwo" >
                                <li @click="fetchThirdMenu(item.pageId)" :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.filter(e => e === item.pageId).length > 0}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                                    <p class="menu-link mb-0" >{{item.displayName}}</p>
                                    <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                                </li>
                                <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{active: selectedPageId == item.pageId}"  class="menu-item d-flex flex-row align-items-center" v-else>
                                  <span  class="menu-link" >{{item.displayName}}</span>
                                </a>
                              </template>
                          </ul>
                          <ul key="3" class="list-unstyled menu--navs-col menu-list column-three" v-if="this.menuThree.length > 0 && currentIndex == 3">
                            <li @click="goBack()" class="menu-item d-flex flex-row align-items-center " >
                              <span class="material-icons ml-2 icon-back">keyboard_arrow_left</span>
                              <a :aria-label="this.goBackText" class="menu-link menu-back d-flex flex-row align-items-center" >
                                {{this.goBackText}}
                              </a>
                            </li>
                              <template v-for="(item,index) in this.menuThree" >
                                <li @click="fetchFourthMenu(item.pageId)" :key="index" v-if="item.hasChildren && !item.navigate" :class="{'active-blue': activeItems.filter(e => e === item.pageId).length > 0}" class="menu-item d-flex flex-row align-items-center justify-content-between" >
                                  <p class="menu-link mb-0" >{{item.displayName}}</p>
                                  <span v-if="item.hasChildren" class="material-icons">keyboard_arrow_right</span>
                                </li>
                                <a :aria-label="item.displayName" :href="item.url" :key="index" :class="{active: selectedPageId == item.pageId}"  class="menu-item d-flex flex-row align-items-center" v-else>
                                  <span  class="menu-link" >{{item.displayName}}</span>
                                </a>
                              </template>
                          </ul>
                          <ul key="4" class="list-unstyled menu--navs-col menu-list column-three" v-if="this.menuFour.length > 0 && currentIndex == 4">
                            <li @click="goBack()" class="menu-item d-flex flex-row align-items-center " >
                              <span class="material-icons ml-2 icon-back">keyboard_arrow_left</span>
                              <a :aria-label="this.goBackText" class="menu-link menu-back d-flex flex-row align-items-center" >
                                {{this.goBackText}}
                              </a>
                            </li>
                              <a :aria-label="item.displayName" :href="item.url" v-for="(item,index) in this.menuFour" :key="index" :class="{active: selectedPageId == item.pageId}"  class="menu-item d-flex flex-row align-items-center" >
                                <span  class="menu-link" >{{item.displayName}}</span>
                              </a>
                          </ul>
                      </transition>
                </div>
                <div class="menu--navs d-flex justify-content-center align-items-center w-100 flex-row" key="2" v-else>
                  {{this.loadingText}}
                </div>
              </transition>
          </div>
      </div>
    `
});