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

package/src/components/AppCompNavigation.vue

@@ -1,949 +1,960 @@
-<!--
- @ 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. Portal 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">
-      <b-link
-        id="btn_back_summary"
-        :to="{ name: 'menu' }"
-        class="btn btn-ghost"
-        :title="$t('button.menu')"
-      >
-        <svg width="20" height="17">
-          <use href="#home-icon" />
-        </svg>
-        <span>{{ $t('button.menu') }}</span>
-      </b-link>
-
-      <app-base-button id="toc" @click="openToc()">
-        <svg width="20" height="17">
-          <use href="#timeline-icon" />
-        </svg>
-        <span>{{ $t('button.toc') }}</span>
-      </app-base-button>
-
-      <app-base-button @click="openCreditNote()">
-        <svg width="20" height="17">
-          <use href="#info-icon" />
-        </svg>
-        <span>{{ $t('button.info') }}</span>
-      </app-base-button>
-    </div>
-
-    <!-- Navigation principale -->
-
-    <portal v-if="!isMenu" to="primary_nav">
-      <button
-        id="btn_previous_page"
-        ref="btn_previous_page"
-        :title="previousLabel"
-        class="nav_main_btn primary_nav_btn"
-        :class="{ md_disabled: !backAllowed || !enableNavLeftBtn }"
-        :disabled="!backAllowed || !enableNavLeftBtn"
-        @click="goPrevious"
-      >
-        <svg width="24" height="24">
-          <use href="#navigate-previous-icon" fill="#fff" />
-        </svg>
-      </button>
-      <button
-        id="btn_next_page"
-        ref="btn_next_page"
-        :title="nextLabel"
-        class="nav_main_btn primary_nav_btn"
-        :class="{ md_disabled: !enableNavRightBtn }"
-        :disabled="!enableNavRightBtn"
-        @click="goNext"
-      >
-        <svg
-          v-show="!nextLesson && !nextActivity"
-          width="11.667"
-          height="11.46"
-        >
-          <use href="#fleche-retour-icon" fill="#fff" />
-        </svg>
-        <svg v-show="nextLesson || nextActivity" width="7.41" height="12">
-          <use href="#navigate-next-icon" fill="#fff"></use>
-        </svg>
-      </button>
-    </portal>
-    <!---------------------------- TEST ------------------------->
-
-    <portal v-if="endActivityPopup" to="wrap-end-activity">
-      <button @click="navigateTo(endActivityPopup.backRoute)">
-        <span>{{ endActivityPopup.backLabel }}</span>
-
-        <svg v-show="!nextLesson" width="11.667" height="11.46">
-          <use href="#fleche-retour-icon" fill="#fff" />
-        </svg>
-        <svg v-show="nextLesson" width="7.41" height="12">
-          <use href="#navigate-next-icon" fill="#fff"></use>
-        </svg>
-      </button>
-
-      <button @click="navigateTo(endActivityPopup.nextRoute)">
-        {{ endActivityPopup.nextLabel }}
-      </button>
-    </portal>
-
-    <!---------------------------- END TEST ------------------------->
-    <app-comp-settings-menu />
-    <app-comp-table-of-content></app-comp-table-of-content>
-    <app-comp-note-credit></app-comp-note-credit>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import AppCompSettingsMenu from './AppCompSettingsMenu.vue'
-export default {
-  components: { AppCompSettingsMenu },
-  props: {
-    autoNavigate: { type: Boolean, default: false }
-  },
-
-  data() {
-    return {
-      nextPageLabel: null,
-      hasMedia: false,
-      mediaType: null,
-      mediaPlaybackEnd: false,
-      navigation: {},
-      currentPath: null,
-      navigationRoutes: null,
-      currentActivity: null,
-      currentPageId: null,
-      anchors: [],
-      pageInfo: null,
-      nextActivity: null,
-      nextLabel: 'next',
-      nextActivityRoute: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getCurrentPage',
-      'getModuleChildren',
-      'getIntroStatus',
-      'getUserInteraction',
-      'getAnchorsForActivity',
-      'getConnectionInfo',
-      'getAppConfigs',
-      'getPageData',
-      'getAllActivitiesState',
-      'getShowPrimaryCtrl',
-      'getShowNavRightCtrl',
-      'getShowNavLeftCtrl',
-      'getBifChoice',
-      'getMenuSettings'
-    ]),
-
-    // /// WAITING FOR UX UI CONCLUSION TO MODIF
-    finalPageBtnLabel() {
-      let label
-      if (!this.nextLesson) {
-        label = this.$t('button.back_to_menu')
-      } else if (this.nextLesson && this.getAppConfigs.nextConcluModule) {
-        label = this.$t('button.go_to_module_conclusion')
-      } else if (this.nextLesson && !this.getAppConfigs.nextConcluModule) {
-        label = this.$t('button.go_to_lesson')
-      }
-      return label
-    },
-
-    /// MUST BE MODIFY BECAUSE MENU IS VIEW NOW
-    pagination() {
-      let p = { counter: null, total: null }
-
-      const { context } = this.navigationRoutes
-
-      switch (context) {
-        /* In  the context of introduction, menu should not be counted in the pagination*/
-        case 'introduction':
-          {
-            if (this.$route.name === 'menu') p.counter = 0
-
-            p.total = this.navigationRoutes.cat.filter(
-              (route) => route._path !== 'menu'
-            ).length
-
-            p.counter = this.navigationRoutes.cat.findIndex(
-              (route) => route._ref === this.$route.meta.id
-            )
-          }
-          break
-
-        default:
-          p.counter =
-            this.navigationRoutes.cat.findIndex(
-              (route) => route._ref === this.$route.meta.id
-            ) + 1
-
-          p.total = this.navigationRoutes.cat.length
-      }
-      return p
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    backAllowed() {
-      let isAllowed = true // by default
-      // Navigation to next/previous activity is permitted. prevent negate navigation in conditions bellow.
-      if (this.autoNavigate) {
-        switch (this.navigationRoutes.context) {
-          case 'introduction':
-            if (this.$route.meta.id === this.navigationRoutes.cat[0]._ref)
-              isAllowed = false
-            break
-          case 'normal':
-            if (
-              this.previousActivity &&
-              this.previousActivity._namedRoute === 'introduction'
-            )
-              isAllowed = false
-            break
-        }
-      }
-      //  Navigation to next/previous activity has not been permitted.
-      else if (this.$route.meta.id === this.navigationRoutes.cat[0]._ref)
-        isAllowed = false
-      return isAllowed
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    nextAllowed() {
-      let isAllowed = true
-      const { length } = this.navigationRoutes.cat
-
-      if (this.autoNavigate) {
-        // Check if there is a next activity (could be page a page of current activity or page of next activity)
-        if (!this.nextActivity) isAllowed = false
-      } else {
-        if (this.$route.meta.id === this.navigationRoutes.cat[length - 1]._ref)
-          isAllowed = false
-      }
-      return isAllowed
-    },
-    isMenu() {
-      return this.$route.name === 'menu'
-    },
-    nextLesson() {
-      const { linkedResource } = this.getAppConfigs
-      if (linkedResource) return linkedResource
-      else return null
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    previousLabel() {
-      let label = this.$route.meta
-      if (
-        this.$route.meta.activity_ref == 'A00' &&
-        this.$route.meta.id == 'P01'
-      ) {
-        label = this.$t('button.back_to_menu')
-      } else if (
-        this.$route.meta.activity_ref == 'A01' &&
-        this.$route.meta.id == 'P01'
-      ) {
-        label = this.$t('button.go_to_introduction')
-      } else {
-        label = this.$t('button.previous')
-      }
-
-      return label
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    enablePrimaryBtn() {
-      return this.getShowPrimaryCtrl
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    enableNavLeftBtn() {
-      return this.getShowNavLeftCtrl
-    },
-    /**
-     * TO MODIFY AFTER UX/UI
-     */
-    enableNavRightBtn() {
-      return this.getShowNavRightCtrl
-    },
-    endActivityPopup() {
-      let content = null
-
-      let noMenu = this.$helper.getSettingsFromStore('no_menu')
-
-      switch (true) {
-        case this.nextActivity && 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.back_to_first_page'),
-            nextRoute: this.nextActivity._namedRoute,
-            backRoute: bckRoute._namedRoute
-          }
-          break
-        }
-
-        case this.nextActivity && !noMenu:
-          content = {
-            nextLabel: this.$t('button.next_activity'),
-            backLabel: this.$t('button.go_to_menu'),
-            nextRoute: this.nextActivity._namedRoute,
-            backRoute: 'menu'
-          }
-          break
-
-        case this.nextLesson && 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.back_to_first_page'),
-            nextRoute: this.nextLesson,
-            backRoute: bckRoute._namedRoute
-          }
-          break
-        }
-
-        case this.nextLesson && !noMenu:
-          content = {
-            nextLabel: this.$t('button.go_to_lesson'),
-            backLabel: this.$t('button.go_to_menu'),
-            nextRoute: this.nextLesson,
-            backRoute: 'menu'
-          }
-          break
-
-        case !this.nextLesson && noMenu && !this.nextActivity: {
-          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.stay_on_page'),
-            backLabel: this.$t('button.back_to_first_page'),
-            nextRoute: '',
-            backRoute: bckRoute._namedRoute
-          }
-          break
-        }
-
-        case !this.nextLesson && !noMenu && !this.nextActivity:
-          content = {
-            nextLabel: this.$t('button.stay_on_page'),
-            backLabel: this.$t('button.go_to_menu'),
-            nextRoute: '',
-            backRoute: 'menu'
-          }
-          break
-      }
-
-      return content
-    }
-  },
-  watch: {
-    $route() {
-      this.setNavigation() // reset the navigation context when route change
-      setTimeout(() => {
-        this.initPage()
-      }, 200)
-    }
-  },
-  mounted() {
-    this.$bus.$on('mediaPlaybackEnded', this.onMediaEnded)
-    this.$bus.$on('quizNoAnswer', this.showPopupNoAnswer)
-
-    this.setNavigation()
-    setTimeout(() => {
-      this.initPage()
-    }, 200)
-  },
-  methods: {
-    initPage() {
-      // TO CLEANNING
-
-      this.setNextActivity()
-      this.setPreviousActivity()
-    },
-    // TO CLEANNING WAITING FOR NEW PLAYER
-    getMediaInfo() {
-      this.hasMedia = this.pageInfo.type === 'pg_media'
-      if (this.hasMedia) {
-        this.mediaType = this.pageInfo.mediaData.mType
-      }
-    },
-    getActivity() {
-      const { all_routes } = this.$helper.getRoutesFromVueRouter()
-      const activity = all_routes.find(
-        (route) => route.meta.id === this.$router.currentRoute.meta.activity_ref
-      )
-      return activity
-    },
-    onMediaEnded() {
-      this.mediaPlaybackEnd = true
-    },
-    //TO MODIFY AFTER UX/UI
-    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
-    },
-    goNext() {
-      this.$bus.$emit('close-widget')
-
-      const pageIndex = this.navigationRoutes.cat.findIndex(
-        (route) => route._ref === this.$route.meta.id
-      )
-      const next = pageIndex + 1
-
-      // 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
-        this.$router.push({
-          name: `${this.navigationRoutes.cat[0]._namedRoute}.${
-            this.getPageNavBif(
-              this.$route.meta.activity_ref,
-              this.$route.meta.id
-            ).end
-          }`
-        })
-      }
-      // Last page not reached. Navigate to the next page of the current liste
-      else if (pageIndex > -1 && this.navigationRoutes.cat[next]) {
-        this.$router.push({
-          name: `${this.navigationRoutes.cat[next]._namedRoute}`
-        })
-      }
-
-      // last page of the current list reached. Navigate to next lesson
-      else if (this.autoNavigate && this.nextActivity) {
-        this.openPopup(
-          {
-            type: 'popup-endActivity',
-            value: {
-              title: this.$t('popup.text_congratulation'),
-
-              hypertext_1: `<p>${this.$t('text.title_end_activity')}<p>`
-            }
-          },
-          'no_attempts'
-        )
-        this.nextActivityRoute = this.nextActivity._namedRoute
-
-        // if choice not made jump to end of bifurcation
-      } else {
-        this.openPopup(
-          {
-            type: 'popup-endActivity',
-            value: {
-              title: '',
-
-              hypertext_1: `<p>${this.$t('text.title_end_activity')}<p>`
-            }
-          },
-          'no_attempts'
-        )
-        this.nextActivityRoute = this.nextLesson
-      }
-    },
-
-    goPrevious() {
-      // ==================normal navigation ====================
-
-      const pageIndex = this.navigationRoutes.cat.findIndex(
-        (route) => route._ref === this.$route.meta.id
-      )
-      const previous = pageIndex - 1
-
-      this.$bus.$emit('close-widget')
-
-      // 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('/')
-      }
-    },
-    // //// TO CLEAN JAI LE GO DE HUBERSON
-    // /*
-    //  * watch currentRoute to define the navigation catalog
-    //  *  check if currentRoute type is a branching
-    //  */
-    setNavigation() {
-      // current Route is module
-      this.currentActivity = this.$router.currentRoute.meta.activity_ref
-      this.currentPageId = this.$router.currentRoute.meta.id
-
-      const { all_routes, meta } = this.$helper.getRoutesFromVueRouter()
-
-      if (this.$router.currentRoute.name === 'module') {
-        this.navigationRoutes = {
-          context: 'module',
-          cat: meta.children
-        }
-      }
-      // Navigation catalog is the introduction
-      else if (
-        this.$router.currentRoute.meta.type === 'introduction' ||
-        this.$router.currentRoute.meta.type === 'menu'
-      ) {
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id ===
-            this.$router.currentRoute.meta.activity_ref.$folderName
-        )
-
-        const b = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.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.meta.activity_ref.$folderName
-        )
-
-        // on refresh $forderName doesn't existe
-        const b = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
-        )
-
-        if (a) {
-          this.navigationRoutes = {
-            context: 'normal',
-            cat: a.meta.children
-          }
-        } else if (b) {
-          this.navigationRoutes = {
-            context: 'normal',
-            cat: b.meta.children
-          }
-        }
-      }
-
-      this.$bus.$emit('set-comp-status', 'AppCompNavigationFull', 'ready')
-    }, // END setNaviagation
-    /**
-     *@description: set the next activity to for the Navigation
-     */
-    setNextActivity() {
-      if (this.autoNavigate && 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': {
-            // This is the last page in the of introduction (this the menu)
-            if (
-              current === this.navigationRoutes.cat.length - 1 &&
-              allRoutes.length > 1
-            ) {
-              this.nextActivity = allRoutes[1] // go to the 1st activity
-
-              //let conclu = this.conclusionComming()
-
-              //   if (!conclu) {
-              //     this.nextPageLabel = this.$t('button.next_activity')
-              //   } else {
-              //     this.nextPageLabel = this.$t('button.go_to_conclusion')
-              //   }
-            }
-            //setting next activity or null if undefined, will show "next lesson" button
-            else
-              this.nextActivity = this.navigationRoutes.cat[current + 1] || null
-            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] // get the next activity in the router catalog
-
-              // let conclu = this.conclusionComming()
-              // if (!conclu) {
-              //   this.nextPageLabel = this.$t('button.next_activity')
-              // } else {
-              //   this.nextPageLabel = this.$t('button.go_to_conclusion')
-              // }
-            }
-            // 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]
-            }
-            // There is no other activity after the current one
-            else this.nextActivity = null
-
-            break
-          }
-        }
-      } else this.nextActivity = null
-
-      this.$store.dispatch('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]
-            }
-            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 catologue
-            // return point is introduction
-            if (current === 0 && currentRouteIndex === 1) {
-              const _length = allRoutes[0].children.length
-              this.previousActivity = allRoutes[0].meta.children[_length - 1] // 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] // previous is last page of previous activity
-            }
-            // This is a simply another page in an activity
-            else this.previousActivity = this.navigationRoutes.cat[current - 1]
-            break
-          }
-        }
-      } else this.previousActivity = null
-    },
-    openPopup(popUpData) {
-      this.$bus.$emit('open-popup', popUpData)
-    },
-    /**
-     * @description hide the navigation of the application
-     * @param {String} s - s name of the navigation element to hide ('back' | 'next')
-     */
-    hideNavigationCtrls(s) {
-      s = s || 'all'
-
-      if (s && !['back', 'next', 'all'].includes(s.toLowerCase(s))) return
-
-      switch (s) {
-        case 'back':
-          {
-            this.$store.dispatch('setShowNavLeftCtrl', false)
-          }
-          break
-        case 'next':
-          {
-            this.$store.dispatch('setShowNavRightCtrl', false)
-            this.$store.dispatch('setShowPrimaryCtrl', false)
-          }
-
-          break
-
-        case 'all':
-          {
-            //hide the Upper Nav bar controls
-            this.$store.dispatch('setShowNavLeftCtrl', false)
-            this.$store.dispatch('setShowNavRightCtrl', false)
-
-            //hide the main navigation to next page
-            this.$store.dispatch('setShowPrimaryCtrl', false)
-          }
-          break
-      }
-    },
-
-    // TO CLEANNING
-    // /**
-    //  * @description show the navigation of the application
-    //  * @param {String} s - s name of the navigation element to hide ('back' | 'next')
-    //  */
-    // showNavigationCtrls(s) {
-    //   s = s || 'all'
-
-    //   if (s && !['back', 'next', 'all'].includes(s.toLowerCase(s))) return
-
-    //   switch (s) {
-    //     case 'back':
-    //       {
-    //         this.$store.dispatch('setShowNavLeftCtrl', true)
-    //       }
-    //       break
-    //     case 'next':
-    //       {
-    //         this.$store.dispatch('setShowNavRightCtrl', true)
-    //         this.$store.dispatch('setShowPrimaryCtrl', true)
-    //       }
-
-    //       break
-
-    //     case 'all':
-    //       {
-    //         //hide the Upper Nav bar controls
-    //         this.$store.dispatch('setShowNavLeftCtrl', true)
-    //         this.$store.dispatch('setShowNavRightCtrl', true)
-
-    //         //hide the main navigation to next page
-    //         this.$store.dispatch('setShowPrimaryCtrl', true)
-    //       }
-    //       break
-    //   }
-    // },
-
-    /**
-     * @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">
-.navbar {
-  transition: width 0.5s;
-
-  &:focus,
-  &:hover,
-  &.show {
-    width: 115px !important;
-
-    #tool-bar {
-      button,
-      a {
-        span {
-          display: block;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
-.app-ctrl {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  height: 100%;
-  width: 100%;
-  position: relative;
-
-  #tool-bar {
-    width: 100%;
-    padding: 32px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-wrap: wrap;
-
-    button,
-    a {
-      display: block;
-      margin-bottom: 30px;
-
-      span {
-        transition: opacity 0.5s, display 0.5s;
-        display: none;
-        opacity: 0;
-      }
-    }
-  }
-}
-</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">{{ 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>