fcad-core-dragon 2.0.0-beta.3 → 2.0.0-beta.5

package/src/components/AppCompNavigation.vue

@@ -1,960 +1,972 @@
-<!-- About this Component--
- @ Description: This component is used to display and create the navigation in el+ mode.
- @ What it does: Create the link to back back to the menu. Create link to the all the anchor to the current activity and display the curent anchor and the button next page and previous page. Teleport are use to place the element in the rigth place in the main frame.
--->
-<template>
-  <div v-if="navigationRoutes" class="app-ctrl">
-    <div id="tool-bar">
-      <router-link
-        id="btn_back_summary"
-        :to="{ name: homeLanding.route }"
-        class="btn"
-        :title="homeLanding.title"
-      >
-        <template #default>
-          <svg class="home-icon">
-            <use href="#home-icon" />
-          </svg>
-
-          <span class="toolbar_label">{{ homeLanding.title }}</span>
-        </template>
-      </router-link>
-      <div class="ctn-w">
-        <app-base-button
-          id="toc"
-          :title="$t('button.toc')"
-          :aria-label="$t('button.toc')"
-          @click="openToc()"
-        >
-          <svg class="toc-icon">
-            <use href="#toc-icon" />
-          </svg>
-          <span class="toolbar_label">{{ $t('button.toc') }}</span>
-        </app-base-button>
-        <app-comp-table-of-content />
-      </div>
-      <div class="ctn-w">
-        <app-base-button
-          id="btn_infos"
-          :title="$t('button.info')"
-          :aria-label="$t('button.info')"
-          :disabled="noInfo"
-          :class="{ md_disabled: noInfo }"
-          @click="openCreditNote()"
-        >
-          <svg class="info-icon">
-            <use href="#info-icon" />
-          </svg>
-          <span class="toolbar_label">{{ $t('button.info') }}</span>
-        </app-base-button>
-        <app-comp-note-credit />
-      </div>
-    </div>
-
-    <!-- Navigation principale -->
-
-    <SafeTeleport to="#primary_nav_wrapper">
-      <template v-if="!isMenu">
-        <app-base-button
-          id="btn_previous_page"
-          ref="btn_previous_page"
-          class="nav_main_btn primary_nav_btn"
-          :title="$t('button.go_to_previous_page')"
-          :aria-label="$t('button.go_to_previous_page')"
-          :is-active="!backAllowed"
-          @click="goPrevious"
-        >
-          <svg>
-            <use href="#fleche-gauche-icon" />
-          </svg>
-        </app-base-button>
-        <div class="pagination">
-          <span aria-hidden="true">
-            Page {{ pagination.counter }} / {{ pagination.total }}
-          </span>
-          <span class="sr-only">
-            Page {{ pagination.counter }} {{ pagination.$W }}
-            {{ pagination.total }}
-          </span>
-        </div>
-        <app-base-button
-          id="btn_next_page"
-          ref="btn_next_page"
-          class="nav_main_btn primary_nav_btn"
-          :aria-label="$t('button.go_to_next_page')"
-          :title="$t('button.go_to_next_page')"
-          :is-active="!nextAllowed"
-          @click="goNext"
-        >
-          <svg>
-            <use href="#fleche-droite-icon"></use>
-          </svg>
-        </app-base-button>
-      </template>
-    </SafeTeleport>
-    <!---------------------------- TEST ------------------------->
-    <!---------------------------- END_ACTIVITY_POPUP SECTION ------------------------->
-
-    <SafeTeleport
-      v-if="endActivityPopup && getEndPopUp"
-      defer
-      to="#end-activity"
-    >
-      <div class="popup-bottom-buttons">
-        <app-base-button
-          :aria-label="endActivityPopup.backLabel"
-          :title="endActivityPopup.backLabel"
-          class="popup_primary_nav_btn btn btn-reserve"
-          @click="navigateTo(endActivityPopup.backRoute)"
-        >
-          {{ endActivityPopup.backLabel }}
-        </app-base-button>
-
-        <app-base-button
-          :aria-label="endActivityPopup.nextLabel"
-          :title="endActivityPopup.nextLabel"
-          class="popup_primary_nav_btn btn btn-main"
-          @click="navigateTo(endActivityPopup.nextRoute)"
-        >
-          {{ endActivityPopup.nextLabel }}
-        </app-base-button>
-      </div>
-    </SafeTeleport>
-    <!---------------------------- END END_ACTIVITY_POPUP SECTION ------------------------->
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-export default {
-  props: {
-    autoNavigate: { type: Boolean, default: false }
-  },
-
-  data() {
-    return {
-      hasMedia: false,
-      mediaType: null,
-      mediaPlaybackEnd: false,
-      navigation: {},
-      currentPath: null,
-      navigationRoutes: null,
-      currentActivity: null,
-      currentPageId: null,
-      anchors: [],
-      pageInfo: null,
-      nextActivity: null,
-      nextActivityRoute: null
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getCurrentPage',
-      'getModuleInfo',
-      'getIntroStatus',
-      'getUserInteraction',
-      'getAnchorsForActivity',
-      'getAppConfigs',
-      'getBifChoice',
-      'getMenuSettings',
-      'getWidgetOpen',
-      'getDataNoteCredit',
-      'getPopStatus',
-      'getEndPopUp'
-    ]),
-    noInfo() {
-      if (this.getDataNoteCredit.note || this.getDataNoteCredit.credit) {
-        return false
-      } else return true
-    },
-
-    /// MUST BE MODIFY BECAUSE MENU IS VIEW NOW
-    pagination() {
-      let p = { counter: null, total: null }
-
-      p['$W'] = this.$i18n.locale === 'fr' ? 'de' : 'of'
-
-      p.counter =
-        this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        ) + 1
-
-      p.total = this.navigationRoutes.cat.length
-
-      return p
-    },
-
-    backAllowed() {
-      let isAllowed = true // by default
-      const { all_routes } = this.$helper.getRoutesFromVueRouter() // get all route of all activities
-      const theFirstRoute = all_routes[0].children[0] // get first route of 1st activity
-
-      //Prevent back to previous when 1st page of the 1st group of activities
-      if (theFirstRoute.name === this.$route.name) isAllowed = false
-
-      return isAllowed
-    },
-    nextAllowed() {
-      let isAllowed
-
-      //const { auto_next_activity } = this.getAppConfigs
-      const { all_routes } = this.$helper.getRoutesFromVueRouter() // get all route of all activities
-      let lastRoute = null
-
-      if (!this.autoNavigate) {
-        lastRoute = this.navigationRoutes.cat.toReversed()[0] //get last route in courant route catalogue
-        //block navigation at the end of an activity (last route of current activity)
-        isAllowed = lastRoute._namedRoute === this.$route.name ? false : true
-      } else {
-        lastRoute = all_routes.toReversed()[0].children.toReversed()[0] // get the last route of last activity
-
-        //block navigation when current route is last route and there is no next lesson
-        isAllowed =
-          lastRoute.name === this.$route.name && !this.nextLesson ? false : true
-      }
-
-      return isAllowed
-    },
-
-    isMenu() {
-      return this.$route.name === 'menu'
-    },
-
-    nextLesson() {
-      const { linkedResource } = this.getAppConfigs
-      if (linkedResource) return linkedResource
-      else return null
-    },
-
-    previousLabel() {
-      let label =
-        this.$route.meta.id !== 'P01' ? this.$t('button.previous') : ''
-
-      return label
-    },
-
-    nextLabel() {
-      const lastRoute = this.navigationRoutes.cat.toReversed()[0] // get the last route by reversing the order of the navigation catalog
-      let label =
-        this.$route.meta.id !== lastRoute._ref
-          ? this.$t('button.go_to_next_page')
-          : this.$t('button.carousel_next')
-      return label
-    },
-
-    homeLanding() {
-      let { no_menu: noMenu } = this.getAppConfigs
-      const activityRoutes = this.$helper.getRoutesFromVueRouter()
-      //Get the 1st route from the list of routes
-      const bckRoute = activityRoutes.meta.children[0]
-      return noMenu
-        ? {
-            title: this.$t('button.go_to_first_page'),
-            route: bckRoute._namedRoute
-          }
-        : { title: this.$t('button.menu'), route: 'menu' }
-    },
-
-    endActivityPopup() {
-      let content = null
-
-      let { no_menu: noMenu } = this.getAppConfigs
-
-      if (!this.nextActivity) return
-
-      switch (true) {
-        // Next is an activity and there is no menu
-        case this.nextActivity.type_of_next === 'ACTIVITY' && noMenu: {
-          const activityRoutes = this.$helper.getRoutesFromVueRouter(
-            this.$route.meta.activity_ref
-          )
-          //Get the 1st route from the list of routes of this current activity
-          const bckRoute = activityRoutes.meta.children[0]
-          content = {
-            nextLabel: this.$t('button.next_activity'),
-            backLabel: this.$t('button.go_to_first_page'),
-            nextRoute: this.nextActivity._namedRoute,
-            backRoute: bckRoute._namedRoute,
-            nextEnabled: true,
-            backEnabled: true
-          }
-          break
-        }
-        // Next is an activity and there is a menu
-        case this.nextActivity.type_of_next === 'ACTIVITY' && !noMenu:
-          content = {
-            nextLabel: this.$t('button.next_activity'),
-            backLabel: this.$t('button.go_to_menu'),
-            nextRoute: this.nextActivity._namedRoute,
-            backRoute: 'menu',
-            nextEnabled: true,
-            backEnabled: true
-          }
-          break
-        // Next is a lesson and there is no menu
-        case this.nextActivity.type_of_next === 'LESSON' && noMenu: {
-          const activityRoutes = this.$helper.getRoutesFromVueRouter()
-          //Get the 1st route from the list of routes
-          const bckRoute = activityRoutes.meta.children[0]
-          content = {
-            nextLabel: this.$t('button.go_to_lesson'),
-            backLabel: this.$t('button.go_to_first_page'),
-            nextRoute: this.nextLesson,
-            backRoute: bckRoute._namedRoute,
-            nextEnabled: true,
-            //backEnabled: (() => (isSingleActivity ? false : true))() //show back button of the endActivity popup when it is not a single activity.
-            backEnabled: true //show back button of the endActivity popup when it is not a single activity.
-          }
-          break
-        }
-        // Next is a lesson and there is a menu
-        case this.nextActivity.type_of_next === 'LESSON' && !noMenu:
-          content = {
-            nextLabel: this.$t('button.go_to_lesson'),
-            backLabel: this.$t('button.go_to_menu'),
-            nextRoute: this.nextLesson,
-            backRoute: 'menu',
-            nextEnabled: true,
-            backEnabled: true
-          }
-          break
-      }
-
-      return content
-    }
-  },
-  watch: {
-    $route: {
-      handler() {
-        this.setNavigation() // reset the navigation context when route change
-
-        setTimeout(() => {
-          this.initPage()
-        }, 200)
-      },
-      deep: true
-    }
-  },
-  beforeUnmount() {
-    this.$bus.$off('mediaPlaybackEnded', this.onMediaEnded)
-    this.$bus.$off('quizNoAnswer', this.showPopupNoAnswer)
-  },
-  mounted() {
-    this.$bus.$on('mediaPlaybackEnded', this.onMediaEnded)
-    this.$bus.$on('quizNoAnswer', this.showPopupNoAnswer)
-
-    this.setNavigation()
-    setTimeout(() => {
-      this.initPage()
-    }, 200)
-  },
-  methods: {
-    ...mapActions(useAppStore, ['updateNextActivity']),
-    initPage() {
-      this.setNextActivity()
-      this.setPreviousActivity()
-    },
-
-    getActivity() {
-      const { all_routes } = this.$helper.getRoutesFromVueRouter()
-      const activity = all_routes.find(
-        (route) =>
-          route.meta.id === this.$router.currentRoute.value.meta.activity_ref
-      )
-      return activity
-    },
-    onMediaEnded() {
-      this.mediaPlaybackEnd = true
-    },
-    navigateTo(path) {
-      if (path.constructor === Object)
-        return this.$bus.$emit(
-          'launch-xapi-resource',
-          this.$helper.getNextLessonEnv(this.nextLesson)
-        )
-
-      if (!path) return this.$bus.$emit('close-popup')
-
-      this.$router.push({
-        name: path
-      })
-    },
-    /** *****************Nav Methods*********************** */
-    // TO TEST!!!!
-    getNextPageBifurcationNochoice(activity, page) {
-      let menu = this.getMenuSettings
-      let bif
-      //return if the page you are on is a declare as branching in menuSetting
-      menu[activity].anchors.forEach((value) => {
-        if (value.pageRef == page && value.branching) {
-          bif = true
-        }
-      })
-
-      return bif
-    },
-    // TO TEST!!!!
-    getFirtsPageBif(activity, page) {
-      let data
-
-      // play string to make path sentence
-      if (page.indexOf('0') == 1) {
-        data = `page_${page.substring(page.indexOf('P') + 2)}`
-      } else {
-        data = `page_${page.substring(page.indexOf('P') + 1)}`
-      }
-      let menu = this.getMenuSettings
-      let back = false
-
-      //return if the page you are on is a declare as branching in menuSetting
-      menu[activity].anchors.forEach((value) => {
-        if (value.branching && value.branching.end == data) {
-          back = true
-        }
-      })
-
-      return back
-    },
-    // TO TEST!!!!
-    getPageNavBif(activity, page) {
-      let menu = this.getMenuSettings
-      let data
-
-      // return data star and end page
-      menu[activity].anchors.forEach((value) => {
-        if (value.pageRef == page && value.branching) {
-          data = value.branching
-        }
-      })
-
-      return data
-    },
-    // TO TEST!!!!
-    getPageNavBifStart(activity, page) {
-      let data
-
-      // play string to make path sentence
-      if (page.indexOf('0') == 1) {
-        data = `page_${page.substring(page.indexOf('P') + 2)}`
-      } else {
-        data = `page_${page.substring(page.indexOf('P') + 1)}`
-      }
-      let menu = this.getMenuSettings
-      let back
-
-      //return the start page of bif
-      menu[activity].anchors.forEach((value) => {
-        if (value.branching && value.branching.end == data) {
-          back = value.branching.start
-        }
-      })
-
-      return back
-    },
-    /** @description Method to handle navigation to next content.
-     *  At the end of Navigation:
-     *  - Emit completion status for activity
-     *  - Opens a popup at the end Of activity or Lesson
-     * @fires send-completion-event - completion of ACTIVITY
-     * @fires 'close-widget' - close credit widget
-     *
-     */
-    goNext() {
-      const pageIndex = this.navigationRoutes.cat.findIndex(
-        (route) => route._ref === this.$route.meta.id
-      )
-      const next = pageIndex + 1
-
-      //=====================BIF HANDLING =============================
-      // check if you did made a choice
-      if (
-        !this.getBifChoice &&
-        this.getNextPageBifurcationNoChoice(
-          this.$route.meta.activity_ref,
-          this.$route.meta.id
-        )
-      ) {
-        // create path to make the jump
-        return this.$router.push({
-          name: `${this.navigationRoutes.cat[0]._namedRoute}.${
-            this.getPageNavBif(
-              this.$route.meta.activity_ref,
-              this.$route.meta.id
-            ).end
-          }`
-        })
-      }
-      //=====================END BIF HANDLING =============================
-
-      if (!this.nextActivity) return
-      //Handle navigation to page, activity or Lesson
-      switch (true) {
-        // Next navigate lead to next page of the current liste
-        case this.nextActivity.type_of_next === 'PAGE':
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[next]._namedRoute}`
-          })
-          break
-        //Next  navigation will lead next activity
-        case this.nextActivity.type_of_next === 'ACTIVITY': {
-          const endPopup = {
-            type: 'popup-endActivity',
-            value: {
-              title: `${this.$t('popup.text_what_to_do')}`
-            }
-          }
-
-          this.openPopup(endPopup)
-
-          this.nextActivityRoute = this.nextActivity._namedRoute
-
-          if (this.getModuleInfo.packageType !== 'xapi') return
-
-          this.$bus.$emit('send-completion-event', 'ACTIVITY')
-          break
-        }
-        //Next  navigation will lead next activity
-        case this.nextActivity.type_of_next === 'LESSON': {
-          const endPopup = {
-            type: 'popup-endActivity',
-            value: {
-              template: `<p>${this.$t('popup.text_what_to_do')}</p>`,
-              title: ''
-            }
-          }
-
-          this.openPopup(endPopup)
-
-          this.nextActivityRoute = this.nextLesson
-
-          if (this.getModuleInfo.packageType !== 'xapi') return
-          this.$bus.$emit('send-completion-event', 'ACTIVITY')
-
-          break
-        }
-      }
-    },
-
-    //=============================================================
-    goPrevious() {
-      // ==================normal navigation ====================
-
-      const pageIndex = this.navigationRoutes.cat.findIndex(
-        (route) => route._ref === this.$route.meta.id
-      )
-      const previous = pageIndex - 1
-
-      // validate if ther a branching and did you make a choice
-      if (
-        !this.getBifChoice &&
-        this.getFirtsPageBif(this.$route.meta.activity_ref, this.$route.meta.id)
-      ) {
-        // create path to make the jump
-        if (
-          this.getPageNavBifStart(
-            this.$route.meta.activity_ref,
-            this.$route.meta.id
-          ) == 'page_1'
-        ) {
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[0]._namedRoute}`
-          })
-        } else {
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[0]._namedRoute}.${this.getPageNavBifStart(
-              this.$route.meta.activity_ref,
-              this.$route.meta.id
-            )}`
-          })
-        }
-
-        // back to previous page of module (module.page_xx)
-      } else if (pageIndex > 0 && this.navigationRoutes.cat[previous]._path) {
-        this.$router.push({
-          name: `${this.navigationRoutes.cat[previous]._namedRoute}`
-        })
-        // this is the last page
-      } else {
-        // if allow navigation to activity active, navigate to previous activity
-        if (this.autoNavigate && this.previousActivity) {
-          this.$router.push({ name: this.previousActivity._namedRoute })
-        } else this.$router.push('/')
-      }
-    },
-    setNavigation() {
-      // Close the info widget before navigation
-      if (this.getWidgetOpen) {
-        this.$bus.$emit('close-widget')
-      }
-      // current Route is module
-      this.currentActivity = this.$router.currentRoute.value.meta.activity_ref
-      this.currentPageId = this.$router.currentRoute.value.meta.id
-
-      const { all_routes, meta } = this.$helper.getRoutesFromVueRouter()
-
-      if (this.$router.currentRoute.value.name === 'module') {
-        this.navigationRoutes = {
-          context: 'module',
-          cat: meta.children
-        }
-      }
-      // Navigation catalog is the introduction
-      else if (
-        this.$router.currentRoute.value.meta.type === 'introduction' ||
-        this.$router.currentRoute.value.meta.type === 'menu'
-      ) {
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id ===
-            this.$router.currentRoute.value.meta.activity_ref.$folderName
-        )
-
-        const b = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
-        )
-        if (a) {
-          let r = []
-          //if Intro acitive get all the routes for indroduction or just the menu
-          this.getIntroStatus
-            ? r.push(...a.meta.children)
-            : r.push(
-                a.meta.children.find(
-                  (el) => !el._namedRoute.includes('introduction')
-                )
-              )
-          this.navigationRoutes = {
-            context: 'introduction',
-            cat: r
-          }
-        } else if (b) {
-          let r = []
-          //if Intro acitive get all the routes for indroduction or just the menu
-          this.getIntroStatus
-            ? r.push(...b.meta.children)
-            : r.push(
-                b.meta.children.find(
-                  (el) => !el._namedRoute.includes('introduction')
-                )
-              )
-          this.navigationRoutes = {
-            context: 'introduction',
-            cat: r
-          }
-        }
-      }
-      // Navigation catalog is pages of Activity ||menu
-      else {
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id ===
-            this.$router.currentRoute.value.meta.activity_ref.$folderName
-        )
-
-        // on refresh $forderName doesn't existe
-        const b = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
-        )
-
-        if (a) {
-          this.navigationRoutes = {
-            context: 'normal',
-            cat: a.meta.children
-          }
-        } else if (b) {
-          this.navigationRoutes = {
-            context: 'normal',
-            cat: b.meta.children
-          }
-        }
-      }
-    }, // END setNaviagation
-    /**
-     *@description: set the next activity to for the Navigation
-     */
-    setNextActivity() {
-      if (this.navigationRoutes) {
-        // get all the activities routes from router
-        const { meta } = this.$helper.getRoutesFromVueRouter()
-        const allRoutes = meta.children
-
-        // get the index of the current route
-        const current = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-
-        switch (this.navigationRoutes.context) {
-          case 'introduction': {
-            //Reached the last page in Intro
-            if (current === this.navigationRoutes.cat.length - 1) {
-              //there is a next activity
-              if (allRoutes[1])
-                return (this.nextActivity = {
-                  ...allRoutes[1],
-                  type_of_next: 'ACTIVITY'
-                })
-
-              //There is a next lesson
-              if (this.nextLesson)
-                return (this.nextActivity = {
-                  ...this.nextLesson,
-                  type_of_next: 'LESSON'
-                })
-
-              //There is nothing
-              this.nextActivity = null
-            } else {
-              //Other pages in Intro
-              this.nextActivity = {
-                ...this.navigationRoutes.cat[current + 1],
-                type_of_next: 'PAGE'
-              }
-            }
-            break
-          }
-          case 'normal': {
-            // find the current activity ref in the router catalog
-
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route._ref === this.$route.meta.activity_ref
-            )
-
-            // this is the Last page in current activity
-            if (
-              current === this.navigationRoutes.cat.length - 1 &&
-              allRoutes[currentRouteIndex + 1]
-            ) {
-              this.nextActivity = {
-                ...allRoutes[currentRouteIndex + 1],
-                type_of_next: 'ACTIVITY'
-              } // get the next activity in the router catalog
-            }
-            // this is in the same activity return the next page of the activity
-            else if (this.navigationRoutes.cat[current + 1]) {
-              this.nextActivity = {
-                ...this.navigationRoutes.cat[current + 1],
-                type_of_next: 'PAGE'
-              }
-            }
-            // There is no other activity after the current one
-            else if (this.nextLesson)
-              this.nextActivity = { ...this.nextLesson, type_of_next: 'LESSON' }
-            else this.nextActivity = null
-
-            break
-          }
-        }
-      } else this.nextActivity = null
-
-      this.updateNextActivity(this.nextActivity)
-    },
-    /**
-     * @description: set previous activity for the navigation
-     */
-    setPreviousActivity() {
-      if (this.autoNavigate && this.navigationRoutes) {
-        // get all the activities routes from router
-        const { all_routes: allRoutes } = this.$helper.getRoutesFromVueRouter()
-
-        // get the index of the current route
-        const current = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-
-        switch (this.navigationRoutes.context) {
-          case 'introduction': {
-            // This is the first page in the introduction
-            if (current === 0) {
-              this.previousActivity = null
-            } else {
-              this.previousActivity = {
-                ...this.navigationRoutes.cat[current - 1],
-                type_of_previous: 'PAGE'
-              }
-            }
-            break
-          }
-          case 'normal': {
-            // get the index of the current route
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route.meta.id === this.$route.meta.activity_ref
-            )
-            // this is the 1st page of the 1st activity in the router catalogue
-            // return point is introduction
-            if (current === 0 && currentRouteIndex === 1) {
-              const _length = allRoutes[0].children.length
-              this.previousActivity = {
-                ...allRoutes[0].meta.children[_length - 1],
-                type_of_previous: 'ACTIVITY'
-              } // get last page of the introduction navigation context
-            }
-            // This is the 1st page in another activity in the router catalogue
-            else if (allRoutes[currentRouteIndex - 1] && current === 0) {
-              const _length = allRoutes[currentRouteIndex - 1].children.length
-              this.previousActivity = {
-                ...allRoutes[currentRouteIndex - 1].meta.children[_length - 1],
-                type_of_previous: 'ACTIVITY'
-              } // previous is last page of previous activity
-            }
-            // This is a simply another page in an activity
-            else
-              this.previousActivity = {
-                ...this.navigationRoutes.cat[current - 1],
-                type_of_previous: 'PAGE'
-              }
-            break
-          }
-        }
-      } else this.previousActivity = null
-    },
-    openPopup(popUpData) {
-      this.$bus.$emit('open-popup', popUpData)
-    },
-
-    /**
-     * @description - send information to open toc
-     */ openToc() {
-      this.$bus.$emit('toggle-widget', 'toc')
-      this.$bus.$emit('info-activity', this.getCurrentPage.activityRef)
-    },
-    /**
-     * @description - send information to open credit and note
-     */
-    openCreditNote() {
-      this.$bus.$emit('toggle-widget', 'noteCredit')
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.app-nav {
-  transition: width 0.5s;
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-content: start !important;
-  width: 67px;
-  height: 100vh;
-
-  .app-ctrl {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    width: 100%;
-
-    #tool-bar {
-      width: 100%;
-      padding: 32px 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      & .ctn-w > button,
-      & > a {
-        //display: block;
-        width: 80px;
-        height: 80px;
-        padding: 0 !important;
-        margin-bottom: 24px;
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-        justify-content: center;
-        position: relative;
-
-        .home-icon {
-          width: 22px;
-          height: 24px;
-        }
-
-        .toc-icon {
-          width: 41px;
-          height: 22px;
-        }
-
-        .info-icon {
-          width: 24px;
-          height: 24px;
-        }
-
-        span {
-          &.toolbar_label {
-            display: block;
-            transition: opacity 0.5s;
-            visibility: hidden;
-            opacity: 0;
-          }
-        }
-
-        &.active_toc,
-        &.active_infos {
-          &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            height: 100%;
-            width: 4px;
-            left: -16px;
-          }
-        }
-      }
-
-      .ctn-w {
-        position: relative;
-      }
-    }
-  }
-
-  &:focus,
-  &:hover,
-  &.show {
-    width: 115px !important;
-
-    #tool-bar {
-      & .ctn-w > button,
-      a {
-        span.toolbar_label {
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
-#primary_nav_wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
-  margin: 25px 0;
-
-  #btn_previous_page,
-  #btn_next_page {
-    border-radius: 50px;
-    width: 45px;
-    height: 45px;
-    display: flex;
-    justify-content: center;
-
-    /*svg {
-      width: 100%;
-      height: auto;
-    }*/
-  }
-
-  .pagination {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
+<!-- About this Component--
+ @ Description: This component is used to display and create the navigation in el+ mode.
+ @ What it does: Create the link to back back to the menu. Create link to the all the anchor to the current activity and display the curent anchor and the button next page and previous page. Teleport are use to place the element in the rigth place in the main frame.
+-->
+<template>
+  <div v-if="navigationRoutes" class="app-ctrl">
+    <div id="tool-bar">
+      <router-link
+        id="btn_back_summary"
+        :to="{ name: homeLanding.route }"
+        class="btn"
+        :title="homeLanding.title"
+      >
+        <template #default>
+          <svg class="home-icon">
+            <use href="#home-icon" />
+          </svg>
+
+          <span class="toolbar_label">{{ $t('button.menu') }}</span>
+        </template>
+      </router-link>
+      <div class="ctn-w">
+        <app-base-button
+          id="toc"
+          :title="$t('button.toc')"
+          :aria-label="$t('button.toc')"
+          @click="openToc()"
+        >
+          <svg class="toc-icon">
+            <use href="#toc-icon" />
+          </svg>
+          <span class="toolbar_label">{{ $t('button.toc') }}</span>
+        </app-base-button>
+        <app-comp-table-of-content />
+      </div>
+      <div class="ctn-w">
+        <app-base-button
+          id="btn_infos"
+          :title="$t('button.info')"
+          :aria-label="$t('button.info')"
+          :aria-disabled="!noInfo"
+          :class="{ md_disabled: !noInfo }"
+          @click="openCreditsNotes()"
+        >
+          <svg class="info-icon">
+            <use href="#info-icon" />
+          </svg>
+          <span class="toolbar_label">{{ $t('button.info') }}</span>
+        </app-base-button>
+        <app-comp-note-credit />
+      </div>
+    </div>
+
+    <!-- Navigation principale -->
+
+    <SafeTeleport to="#primary_nav_wrapper">
+      <template v-if="!isMenu">
+        <app-base-button
+          id="btn_previous_page"
+          ref="btn_previous_page"
+          class="nav_main_btn primary_nav_btn"
+          :title="$t('button.go_to_previous_page')"
+          :aria-label="$t('button.go_to_previous_page')"
+          :is-disabled="!backAllowed"
+          @click="goPrevious"
+        >
+          <svg>
+            <use href="#fleche-gauche-icon" />
+          </svg>
+        </app-base-button>
+        <div class="pagination">
+          <span aria-hidden="true">
+            Page {{ pagination.counter }} / {{ pagination.total }}
+          </span>
+          <span class="sr-only">
+            Page {{ pagination.counter }} {{ pagination.$W }}
+            {{ pagination.total }}
+          </span>
+        </div>
+        <app-base-button
+          id="btn_next_page"
+          ref="btn_next_page"
+          class="nav_main_btn primary_nav_btn"
+          :aria-label="$t('button.go_to_next_page')"
+          :title="$t('button.go_to_next_page')"
+          :is-disabled="!nextAllowed"
+          @click="goNext"
+        >
+          <svg>
+            <use href="#fleche-droite-icon"></use>
+          </svg>
+        </app-base-button>
+      </template>
+    </SafeTeleport>
+    <!---------------------------- TEST ------------------------->
+    <!---------------------------- END_ACTIVITY_POPUP SECTION ------------------------->
+
+    <SafeTeleport
+      v-if="endActivityPopup && getEndPopUp"
+      defer
+      to="#end-activity"
+    >
+      <div class="popup-bottom-buttons">
+        <app-base-button
+          :aria-label="endActivityPopup.backLabel"
+          :title="endActivityPopup.backLabel"
+          class="popup_primary_nav_btn btn btn-reserve"
+          @click="navigateTo(endActivityPopup.backRoute)"
+        >
+          {{ endActivityPopup.backLabel }}
+        </app-base-button>
+
+        <app-base-button
+          :aria-label="endActivityPopup.nextLabel"
+          :title="endActivityPopup.nextLabel"
+          class="popup_primary_nav_btn btn btn-main"
+          @click="navigateTo(endActivityPopup.nextRoute)"
+        >
+          {{ endActivityPopup.nextLabel }}
+        </app-base-button>
+      </div>
+    </SafeTeleport>
+    <!---------------------------- END END_ACTIVITY_POPUP SECTION ------------------------->
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+export default {
+  props: {
+    autoNavigate: { type: Boolean, default: false }
+  },
+
+  data() {
+    return {
+      hasMedia: false,
+      mediaType: null,
+      mediaPlaybackEnd: false,
+      navigation: {},
+      currentPath: null,
+      navigationRoutes: null,
+      currentActivity: null,
+      currentPageId: null,
+      anchors: [],
+      pageInfo: null,
+      nextActivity: null,
+      nextActivityRoute: null,
+      notes: null,
+      credits: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentPage',
+      'getModuleInfo',
+      'getIntroStatus',
+      'getUserInteraction',
+      'getAnchorsForActivity',
+      'getAppConfigs',
+      'getBifChoice',
+      'getMenuSettings',
+      'getWidgetOpen',
+      'getPopStatus',
+      'getEndPopUp',
+      'getNotes',
+      'getCredits'
+    ]),
+    noInfo() {
+      return this.infoNotes.length > 0 || this.infoCredits.length > 0
+    },
+    infoNotes() {
+      let active = this.$route.meta.activity_ref
+      let page = this.$route.meta.id
+      let notes = this.getNotes(active, page)
+      return notes
+    },
+    infoCredits() {
+      let active = this.$route.meta.activity_ref
+      let page = this.$route.meta.id
+      let credits = this.getCredits(active, page)
+      return credits
+    },
+    /// MUST BE MODIFY BECAUSE MENU IS VIEW NOW
+    pagination() {
+      let p = { counter: null, total: null }
+
+      p['$W'] = this.$i18n.locale === 'fr' ? 'de' : 'of'
+
+      p.counter =
+        this.navigationRoutes.cat.findIndex(
+          (route) => route._ref === this.$route.meta.id
+        ) + 1
+
+      p.total = this.navigationRoutes.cat.length
+
+      return p
+    },
+
+    backAllowed() {
+      let isAllowed = true // by default
+      const { all_routes } = this.$helper.getRoutesFromVueRouter() // get all route of all activities
+      const theFirstRoute = all_routes[0].children[0] // get first route of 1st activity
+
+      //Prevent back to previous when 1st page of the 1st group of activities
+      if (theFirstRoute.name === this.$route.name) isAllowed = false
+
+      return isAllowed
+    },
+    nextAllowed() {
+      let isAllowed
+
+      //const { auto_next_activity } = this.getAppConfigs
+      const { all_routes } = this.$helper.getRoutesFromVueRouter() // get all route of all activities
+      let lastRoute = null
+
+      if (!this.autoNavigate) {
+        lastRoute = this.navigationRoutes.cat.toReversed()[0] //get last route in courant route catalogue
+        //block navigation at the end of an activity (last route of current activity)
+        isAllowed = lastRoute._namedRoute === this.$route.name ? false : true
+      } else {
+        lastRoute = all_routes.toReversed()[0].children.toReversed()[0] // get the last route of last activity
+
+        //block navigation when current route is last route and there is no next lesson
+        isAllowed =
+          lastRoute.name === this.$route.name && !this.nextLesson ? false : true
+      }
+
+      return isAllowed
+    },
+
+    isMenu() {
+      return this.$route.name === 'menu'
+    },
+
+    nextLesson() {
+      const { linkedResource } = this.getAppConfigs
+      if (linkedResource) return linkedResource
+      else return null
+    },
+
+    previousLabel() {
+      let label =
+        this.$route.meta.id !== 'P01' ? this.$t('button.previous') : ''
+
+      return label
+    },
+
+    nextLabel() {
+      const lastRoute = this.navigationRoutes.cat.toReversed()[0] // get the last route by reversing the order of the navigation catalog
+      let label =
+        this.$route.meta.id !== lastRoute._ref
+          ? this.$t('button.go_to_next_page')
+          : this.$t('button.carousel_next')
+      return label
+    },
+
+    homeLanding() {
+      let { no_menu: noMenu } = this.getAppConfigs
+      const activityRoutes = this.$helper.getRoutesFromVueRouter()
+      //Get the 1st route from the list of routes
+      const bckRoute = activityRoutes.meta.children[0]
+      const btnObj = {
+        title: noMenu
+          ? this.$t('button.go_to_first_page')
+          : this.$t('button.go_to_menu'),
+        route: noMenu ? bckRoute._namedRoute : 'menu'
+      }
+      return btnObj
+    },
+
+    endActivityPopup() {
+      let content = null
+
+      let { no_menu: noMenu } = this.getAppConfigs
+
+      if (!this.nextActivity) return
+
+      switch (true) {
+        // Next is an activity and there is no menu
+        case this.nextActivity.type_of_next === 'ACTIVITY' && noMenu: {
+          const activityRoutes = this.$helper.getRoutesFromVueRouter(
+            this.$route.meta.activity_ref
+          )
+          //Get the 1st route from the list of routes of this current activity
+          const bckRoute = activityRoutes.meta.children[0]
+          content = {
+            nextLabel: this.$t('button.next_activity'),
+            backLabel: this.$t('button.go_to_first_page'),
+            nextRoute: this.nextActivity._namedRoute,
+            backRoute: bckRoute._namedRoute,
+            nextEnabled: true,
+            backEnabled: true
+          }
+          break
+        }
+        // Next is an activity and there is a menu
+        case this.nextActivity.type_of_next === 'ACTIVITY' && !noMenu:
+          content = {
+            nextLabel: this.$t('button.next_activity'),
+            backLabel: this.$t('button.go_to_menu'),
+            nextRoute: this.nextActivity._namedRoute,
+            backRoute: 'menu',
+            nextEnabled: true,
+            backEnabled: true
+          }
+          break
+        // Next is a lesson and there is no menu
+        case this.nextActivity.type_of_next === 'LESSON' && noMenu: {
+          const activityRoutes = this.$helper.getRoutesFromVueRouter()
+          //Get the 1st route from the list of routes
+          const bckRoute = activityRoutes.meta.children[0]
+          content = {
+            nextLabel: this.$t('button.go_to_lesson'),
+            backLabel: this.$t('button.go_to_first_page'),
+            nextRoute: this.nextLesson,
+            backRoute: bckRoute._namedRoute,
+            nextEnabled: true,
+            //backEnabled: (() => (isSingleActivity ? false : true))() //show back button of the endActivity popup when it is not a single activity.
+            backEnabled: true //show back button of the endActivity popup when it is not a single activity.
+          }
+          break
+        }
+        // Next is a lesson and there is a menu
+        case this.nextActivity.type_of_next === 'LESSON' && !noMenu:
+          content = {
+            nextLabel: this.$t('button.go_to_lesson'),
+            backLabel: this.$t('button.go_to_menu'),
+            nextRoute: this.nextLesson,
+            backRoute: 'menu',
+            nextEnabled: true,
+            backEnabled: true
+          }
+          break
+      }
+
+      return content
+    }
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.setNavigation() // reset the navigation context when route change
+
+        setTimeout(() => {
+          this.initPage()
+        }, 200)
+      },
+      deep: true
+    }
+  },
+  beforeUnmount() {
+    this.$bus.$off('mediaPlaybackEnded', this.onMediaEnded)
+    this.$bus.$off('quizNoAnswer', this.showPopupNoAnswer)
+    this.$bus.$off('open-notes', this.openCreditsNotes)
+  },
+  mounted() {
+    this.$bus.$on('mediaPlaybackEnded', this.onMediaEnded)
+    this.$bus.$on('quizNoAnswer', this.showPopupNoAnswer)
+    this.$bus.$on('open-notes', this.openCreditsNotes)
+
+    this.setNavigation()
+    setTimeout(() => {
+      this.initPage()
+    }, 200)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateNextActivity']),
+    initPage() {
+      this.setNextActivity()
+      this.setPreviousActivity()
+    },
+
+    getActivity() {
+      const { all_routes } = this.$helper.getRoutesFromVueRouter()
+      const activity = all_routes.find(
+        (route) =>
+          route.meta.id === this.$router.currentRoute.value.meta.activity_ref
+      )
+      return activity
+    },
+    onMediaEnded() {
+      this.mediaPlaybackEnd = true
+    },
+    navigateTo(path) {
+      if (path.constructor === Object)
+        return this.$bus.$emit(
+          'launch-xapi-resource',
+          this.$helper.getNextLessonEnv(this.nextLesson)
+        )
+
+      this.$router.push({
+        name: path
+      })
+    },
+    /** *****************Nav Methods*********************** */
+    // TO TEST!!!!
+    getNextPageBifurcationNochoice(activity, page) {
+      let menu = this.getMenuSettings
+      let bif
+      //return if the page you are on is a declare as branching in menuSetting
+      menu[activity].anchors.forEach((value) => {
+        if (value.pageRef == page && value.branching) {
+          bif = true
+        }
+      })
+
+      return bif
+    },
+    // TO TEST!!!!
+    getFirtsPageBif(activity, page) {
+      let data
+
+      // play string to make path sentence
+      if (page.indexOf('0') == 1) {
+        data = `page_${page.substring(page.indexOf('P') + 2)}`
+      } else {
+        data = `page_${page.substring(page.indexOf('P') + 1)}`
+      }
+      let menu = this.getMenuSettings
+      let back = false
+
+      //return if the page you are on is a declare as branching in menuSetting
+      menu[activity].anchors.forEach((value) => {
+        if (value.branching && value.branching.end == data) {
+          back = true
+        }
+      })
+
+      return back
+    },
+    // TO TEST!!!!
+    getPageNavBif(activity, page) {
+      let menu = this.getMenuSettings
+      let data
+
+      // return data star and end page
+      menu[activity].anchors.forEach((value) => {
+        if (value.pageRef == page && value.branching) {
+          data = value.branching
+        }
+      })
+
+      return data
+    },
+    // TO TEST!!!!
+    getPageNavBifStart(activity, page) {
+      let data
+
+      // play string to make path sentence
+      if (page.indexOf('0') == 1) {
+        data = `page_${page.substring(page.indexOf('P') + 2)}`
+      } else {
+        data = `page_${page.substring(page.indexOf('P') + 1)}`
+      }
+      let menu = this.getMenuSettings
+      let back
+
+      //return the start page of bif
+      menu[activity].anchors.forEach((value) => {
+        if (value.branching && value.branching.end == data) {
+          back = value.branching.start
+        }
+      })
+
+      return back
+    },
+    /** @description Method to handle navigation to next content.
+     *  At the end of Navigation:
+     *  - Emit completion status for activity
+     *  - Opens a popup at the end Of activity or Lesson
+     * @fires send-completion-event - completion of ACTIVITY
+     * @fires 'close-widget' - close credit widget
+     *
+     */
+    goNext() {
+      const pageIndex = this.navigationRoutes.cat.findIndex(
+        (route) => route._ref === this.$route.meta.id
+      )
+      const next = pageIndex + 1
+
+      //=====================BIF HANDLING =============================
+      // check if you did made a choice
+      if (
+        !this.getBifChoice &&
+        this.getNextPageBifurcationNoChoice(
+          this.$route.meta.activity_ref,
+          this.$route.meta.id
+        )
+      ) {
+        // create path to make the jump
+        return this.$router.push({
+          name: `${this.navigationRoutes.cat[0]._namedRoute}.${
+            this.getPageNavBif(
+              this.$route.meta.activity_ref,
+              this.$route.meta.id
+            ).end
+          }`
+        })
+      }
+      //=====================END BIF HANDLING =============================
+      if (!this.nextActivity) return
+      //Handle navigation to page, activity or Lesson
+      switch (true) {
+        // Next navigate lead to next page of the current liste
+        case this.nextActivity.type_of_next === 'PAGE':
+          this.$router.push({
+            name: `${this.navigationRoutes.cat[next]._namedRoute}`
+          })
+          break
+        //Next  navigation will lead next activity
+        case this.nextActivity.type_of_next === 'ACTIVITY': {
+          const endPopup = {
+            type: 'popup-endActivity',
+            value: {
+              title: `${this.$t('popup.text_what_to_do')}`
+            }
+          }
+
+          this.openPopup(endPopup)
+
+          this.nextActivityRoute = this.nextActivity._namedRoute
+
+          if (this.getModuleInfo.packageType !== 'xapi') return
+
+          this.$bus.$emit('send-completion-event', 'ACTIVITY')
+          break
+        }
+        //Next  navigation will lead next activity
+        case this.nextActivity.type_of_next === 'LESSON': {
+          const endPopup = {
+            type: 'popup-endActivity',
+            value: {
+              template: `<p>${this.$t('popup.text_what_to_do')}</p>`,
+              title: ''
+            }
+          }
+
+          this.openPopup(endPopup)
+
+          this.nextActivityRoute = this.nextLesson
+
+          if (this.getModuleInfo.packageType !== 'xapi') return
+          this.$bus.$emit('send-completion-event', 'ACTIVITY')
+
+          break
+        }
+      }
+    },
+
+    //=============================================================
+    goPrevious() {
+      // ==================normal navigation ====================
+
+      const pageIndex = this.navigationRoutes.cat.findIndex(
+        (route) => route._ref === this.$route.meta.id
+      )
+      const previous = pageIndex - 1
+
+      // validate if ther a branching and did you make a choice
+      if (
+        !this.getBifChoice &&
+        this.getFirtsPageBif(this.$route.meta.activity_ref, this.$route.meta.id)
+      ) {
+        // create path to make the jump
+        if (
+          this.getPageNavBifStart(
+            this.$route.meta.activity_ref,
+            this.$route.meta.id
+          ) == 'page_1'
+        ) {
+          this.$router.push({
+            name: `${this.navigationRoutes.cat[0]._namedRoute}`
+          })
+        } else {
+          this.$router.push({
+            name: `${this.navigationRoutes.cat[0]._namedRoute}.${this.getPageNavBifStart(
+              this.$route.meta.activity_ref,
+              this.$route.meta.id
+            )}`
+          })
+        }
+
+        // back to previous page of module (module.page_xx)
+      } else if (pageIndex > 0 && this.navigationRoutes.cat[previous]._path) {
+        this.$router.push({
+          name: `${this.navigationRoutes.cat[previous]._namedRoute}`
+        })
+        // this is the last page
+      } else {
+        // if allow navigation to activity active, navigate to previous activity
+        if (this.autoNavigate && this.previousActivity) {
+          this.$router.push({ name: this.previousActivity._namedRoute })
+        } else this.$router.push('/')
+      }
+    },
+    setNavigation() {
+      // current Route is module
+      this.currentActivity = this.$router.currentRoute.value.meta.activity_ref
+      this.currentPageId = this.$router.currentRoute.value.meta.id
+
+      const { all_routes, meta } = this.$helper.getRoutesFromVueRouter()
+
+      if (this.$router.currentRoute.value.name === 'module') {
+        this.navigationRoutes = {
+          context: 'module',
+          cat: meta.children
+        }
+      }
+      // Navigation catalog is the introduction
+      else if (
+        this.$router.currentRoute.value.meta.type === 'introduction' ||
+        this.$router.currentRoute.value.meta.type === 'menu'
+      ) {
+        const a = all_routes.find(
+          (route) =>
+            route.meta.id ===
+            this.$router.currentRoute.value.meta.activity_ref.$folderName
+        )
+
+        const b = all_routes.find(
+          (route) =>
+            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
+        )
+        if (a) {
+          let r = []
+          //if Intro acitive get all the routes for indroduction or just the menu
+          this.getIntroStatus
+            ? r.push(...a.meta.children)
+            : r.push(
+                a.meta.children.find(
+                  (el) => !el._namedRoute.includes('introduction')
+                )
+              )
+          this.navigationRoutes = {
+            context: 'introduction',
+            cat: r
+          }
+        } else if (b) {
+          let r = []
+          //if Intro acitive get all the routes for indroduction or just the menu
+          this.getIntroStatus
+            ? r.push(...b.meta.children)
+            : r.push(
+                b.meta.children.find(
+                  (el) => !el._namedRoute.includes('introduction')
+                )
+              )
+          this.navigationRoutes = {
+            context: 'introduction',
+            cat: r
+          }
+        }
+      }
+      // Navigation catalog is pages of Activity ||menu
+      else {
+        const a = all_routes.find(
+          (route) =>
+            route.meta.id ===
+            this.$router.currentRoute.value.meta.activity_ref.$folderName
+        )
+
+        // on refresh $forderName doesn't existe
+        const b = all_routes.find(
+          (route) =>
+            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
+        )
+
+        if (a) {
+          this.navigationRoutes = {
+            context: 'normal',
+            cat: a.meta.children
+          }
+        } else if (b) {
+          this.navigationRoutes = {
+            context: 'normal',
+            cat: b.meta.children
+          }
+        }
+      }
+    }, // END setNaviagation
+    /**
+     *@description: set the next activity to for the Navigation
+     */
+    setNextActivity() {
+      if (this.navigationRoutes) {
+        // get all the activities routes from router
+        const { meta } = this.$helper.getRoutesFromVueRouter()
+        const allRoutes = meta.children
+
+        // get the index of the current route
+        const current = this.navigationRoutes.cat.findIndex(
+          (route) => route._ref === this.$route.meta.id
+        )
+
+        switch (this.navigationRoutes.context) {
+          case 'introduction': {
+            //Reached the last page in Intro
+            if (current === this.navigationRoutes.cat.length - 1) {
+              //there is a next activity
+              if (allRoutes[1])
+                return (this.nextActivity = {
+                  ...allRoutes[1],
+                  type_of_next: 'ACTIVITY'
+                })
+
+              //There is a next lesson
+              if (this.nextLesson)
+                return (this.nextActivity = {
+                  ...this.nextLesson,
+                  type_of_next: 'LESSON'
+                })
+
+              //There is nothing
+              this.nextActivity = null
+            } else {
+              //Other pages in Intro
+              this.nextActivity = {
+                ...this.navigationRoutes.cat[current + 1],
+                type_of_next: 'PAGE'
+              }
+            }
+            break
+          }
+          case 'normal': {
+            // find the current activity ref in the router catalog
+
+            const currentRouteIndex = allRoutes.findIndex(
+              (route) => route._ref === this.$route.meta.activity_ref
+            )
+
+            // this is the Last page in current activity
+            if (
+              current === this.navigationRoutes.cat.length - 1 &&
+              allRoutes[currentRouteIndex + 1]
+            ) {
+              this.nextActivity = {
+                ...allRoutes[currentRouteIndex + 1],
+                type_of_next: 'ACTIVITY'
+              } // get the next activity in the router catalog
+            }
+            // this is in the same activity return the next page of the activity
+            else if (this.navigationRoutes.cat[current + 1]) {
+              this.nextActivity = {
+                ...this.navigationRoutes.cat[current + 1],
+                type_of_next: 'PAGE'
+              }
+            }
+            // There is no other activity after the current one
+            else if (this.nextLesson)
+              this.nextActivity = { ...this.nextLesson, type_of_next: 'LESSON' }
+            else this.nextActivity = null
+
+            break
+          }
+        }
+      } else this.nextActivity = null
+
+      this.updateNextActivity(this.nextActivity)
+    },
+    /**
+     * @description: set previous activity for the navigation
+     */
+    setPreviousActivity() {
+      if (this.autoNavigate && this.navigationRoutes) {
+        // get all the activities routes from router
+        const { all_routes: allRoutes } = this.$helper.getRoutesFromVueRouter()
+
+        // get the index of the current route
+        const current = this.navigationRoutes.cat.findIndex(
+          (route) => route._ref === this.$route.meta.id
+        )
+
+        switch (this.navigationRoutes.context) {
+          case 'introduction': {
+            // This is the first page in the introduction
+            if (current === 0) {
+              this.previousActivity = null
+            } else {
+              this.previousActivity = {
+                ...this.navigationRoutes.cat[current - 1],
+                type_of_previous: 'PAGE'
+              }
+            }
+            break
+          }
+          case 'normal': {
+            // get the index of the current route
+            const currentRouteIndex = allRoutes.findIndex(
+              (route) => route.meta.id === this.$route.meta.activity_ref
+            )
+            // this is the 1st page of the 1st activity in the router catalogue
+            // return point is introduction
+            if (current === 0 && currentRouteIndex === 1) {
+              const _length = allRoutes[0].children.length
+              this.previousActivity = {
+                ...allRoutes[0].meta.children[_length - 1],
+                type_of_previous: 'ACTIVITY'
+              } // get last page of the introduction navigation context
+            }
+            // This is the 1st page in another activity in the router catalogue
+            else if (allRoutes[currentRouteIndex - 1] && current === 0) {
+              const _length = allRoutes[currentRouteIndex - 1].children.length
+              this.previousActivity = {
+                ...allRoutes[currentRouteIndex - 1].meta.children[_length - 1],
+                type_of_previous: 'ACTIVITY'
+              } // previous is last page of previous activity
+            }
+            // This is a simply another page in an activity
+            else
+              this.previousActivity = {
+                ...this.navigationRoutes.cat[current - 1],
+                type_of_previous: 'PAGE'
+              }
+            break
+          }
+        }
+      } else this.previousActivity = null
+    },
+    openPopup(popUpData) {
+      this.$bus.$emit('open-popup', popUpData)
+    },
+
+    /**
+     * @description - send information to open toc
+     */ openToc() {
+      this.$bus.$emit('toggle-widget', { type: 'toc', content: null })
+      this.$bus.$emit('info-activity', this.getCurrentPage.activityRef)
+    },
+    /**
+     * @description - send information to open credit and note
+     */
+    openCreditsNotes() {
+      if (!this.noInfo) return
+      this.$bus.$emit('toggle-widget', {
+        type: 'noteCredit',
+        content: { notes: this.infoNotes, credits: this.infoCredits }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.app-nav {
+  transition: width 0.5s;
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: start !important;
+  width: 67px;
+  height: 100vh;
+
+  .app-ctrl {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+
+    #tool-bar {
+      width: 100%;
+      padding: 32px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      & .ctn-w > button,
+      & > a {
+        //display: block;
+        width: 80px;
+        height: 80px;
+        padding: 0 !important;
+        margin-bottom: 24px;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        position: relative;
+
+        .home-icon {
+          width: 22px;
+          height: 24px;
+        }
+
+        .toc-icon {
+          width: 41px;
+          height: 22px;
+        }
+
+        .info-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        span {
+          &.toolbar_label {
+            display: block;
+            transition: opacity 0.5s;
+            visibility: hidden;
+            opacity: 0;
+          }
+        }
+
+        &.active_toc,
+        &.active_infos {
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 100%;
+            width: 4px;
+            left: -16px;
+          }
+        }
+      }
+
+      .ctn-w {
+        position: relative;
+      }
+    }
+  }
+
+  &:focus,
+  &:hover,
+  &.show {
+    width: 115px !important;
+
+    #tool-bar {
+      & .ctn-w > button,
+      a {
+        span.toolbar_label {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+#primary_nav_wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  margin: 25px 0;
+
+  #btn_previous_page,
+  #btn_next_page {
+    border-radius: 50px;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+
+    /*svg {
+      width: 100%;
+      height: auto;
+    }*/
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>