fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/AppBaseModule.vue

@@ -1,127 +1,124 @@
 <!--
  *@ Description: This component is used as main container to display application and containt to display
  *@ What it does: The component fetch the data for the page to display on navigation.
- *                controle and scorm & xAPI logic and communication
+ *
  *@Note :Must be used
 -->
 
 <template>
   <div fluid class="module">
+    <span
+      id="page_info_section"
+      class="sr-only"
+      aria-labelledby="page_info"
+    ></span>
     <a class="skip-link" href="" @click.prevent="skipToMain">
       {{ $t('message.skip_content') }}
     </a>
-    <portal to="playbar-portal">
-      <app-comp-play-bar :app-status="isReady" :media-to-show="mediaToShw" />
-    </portal>
-    <b-navbar :key="$route.fullpath" class="app-nav">
-      <!------------------------ Nav for drMode ------------------>
-      <!-- <app-comp-table-of-content /> -->
-      <!------------------------ Nav for FullMode ---------------->
-      <app-comp-navigation-full
+
+    <nav
+      v-show="!isMenu"
+      id="navTool"
+      :key="$route.fullpath"
+      class="app-nav"
+      :class="{ show: closeDelay }"
+    >
+      <app-comp-navigation
+        :app-status="appReady ? true : null"
         :auto-navigate="theNavigationBetweenActivity"
-        :app-status="isReady"
       />
-    </b-navbar>
-
+    </nav>
     <base-module :m-data="$data">
-      <b-container
+          
+
+      <v-container
         id="wrapper-content"
         fluid
-        :style="wrapperHeigth"
         :class="{ active: moduleConfig.videoFull }"
         class="scroll-bar"
       >
-        <div
-          v-show="!appReady"
-          id="Loading"
-          key="Loading"
-          :class="{ fadeIn: !appReady && changePage }"
-        >
-          <!-- App ready: {{ appReady }} -->
-          <div class="overlay" />
-          <div class="box-loading-anime disableBlur">
-            <img src="../assets/img/BeanEater-1s-200px.svg" alt="loading" />
-          </div>
-        </div>
         <div class="box">
-          <router-view v-show="appReady" :key="$route.fullpath" ref="main" />
+          <router-view ref="main" :key="$route.fullPath" />
+          <!-- <router-view v-show="appReady" ref="main" :key="$route.fullPath" /> -->
         </div>
-        <portal-target
-          id="primary_nav_wrapper"
-          name="primary_nav"
-        ></portal-target>
-      </b-container>
+
+        <div id="primary_nav_wrapper"></div>
+      </v-container>
     </base-module>
 
     <!------------------POPUP QUICK -------------------------->
-    <app-comp-pop-up v-slot:content />
+    <app-comp-pop-up-next v-show="popupIsOpen">
+      <!-- <template #content></template> -->
+    </app-comp-pop-up-next>
     <!------------------END USE POP UP-------------------------->
-    <!------------------tooltip -------------------------->
-    <app-comp-tool-tip
-      v-if="toolTipTarget !== ''"
-      v-slot:content
-      :target="toolTipTarget"
-    />
-    <!------------------END USE tooltip-------------------------->
-    <!------------------Settings Splash-screeen----------------------------->
-    <b-modal
-      id="splashscreen"
-      ref="splashscreen"
-      :title="$t('label.splashscreen')"
-      size="lg"
-      ok-only
-      no-stacking
-      :ok-title="$t('user_settings.close')"
-      :header-close-label="$t('button.closePopUp')"
-      @hidden="onSplashClose"
-    >
-      <span>
-        {{ $t('message.splash_welcome') }}
-      </span>
-      <b-form-group
-        id="splash-form"
-        v-slot="{ ariaDescribedby }"
-        :label="$t('user_settings.title')"
+
+    <!--------------RIGHT SIDEBAR (for display of extra contents)------------>
+    <Transition name="right-sidebar-transition" mode="out-in">
+      <section
+        v-if="rightSidebarVisible"
+        id="right-sidebar"
+        ref="right-sidebar"
+        :key="dynamicSidebarContent._id"
+        :aria-label="$t('label.side_panel')"
+        :class="{
+          'v-media': dynamicSidebarContent._context === 'ctxTranscript'
+        }"
       >
-        <b-form-checkbox
-          v-for="(setting, index) in Object.entries(settingsSelected)"
-          :key="index"
-          v-model="settingsSelected[setting[0]]"
-          :aria-describedby="ariaDescribedby"
-          switch
-          stacked
-          size="lg"
-          :name="`parameter-${setting[0]}`"
-          :text-field="$t(`user_settings.${setting[0]}`)"
-        >
-          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
-        </b-form-checkbox>
-      </b-form-group>
-    </b-modal>
-    <!------------------END Settings splash-screen-------------------------->
+        <div id="right-sidebar-header">
+          <app-base-button
+            :title="$t('button.closePopUp')"
+            :aria-label="$t('button.closePopUp')"
+            class="btn-reserve-ico embranchement-close"
+            @click="
+              closeSidebar(
+                dynamicSidebarContent._context,
+                dynamicSidebarContent._container
+                  ? dynamicSidebarContent._container
+                  : null
+              )
+            "
+          >
+            <svg aria-hidden="true" focusable="false">
+              <use href="#close-square-icon" />
+            </svg>
+          </app-base-button>
+        </div>
+        <div id="right-sidebar-body">
+          <component
+            :is="dynamicSidebarContent._component"
+            class="v-media"
+            v-bind="{ ...dynamicSidebarContent._comProps }"
+          />
+          <!-- </Transition> -->
+        </div>
+        <div id="right-sidebar-footer"></div>
+      </section>
+    </Transition>
+    <footer></footer>
+    <!-------------------------END RIGHT SIDEBAR------------------------------->
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+// const modules = import.meta.glob('@/module/**/*.vue')
+import { fileAssets } from '../shared/generalfuncs.js'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 import BaseModule from './BaseModule.vue'
-import { timerMixin } from '../mixins/timerMixin'
+import AppCompContainer from './AppCompContainer.vue'
+import { defineAsyncComponent } from 'vue'
 //import
 export default {
   components: {
     BaseModule,
+    AppCompContainer
   },
-  mixins: [timerMixin],
+  inject: ['elapsedIdleTime', 'lessonDuration', 'appTimer'],
   props: {
     moduleConfig: {
       type: Object,
       default: () => {
         return {
-          id: 'mod_001',
-          title: null, // edit to set the title of the lesson
-          description: null,
-          introActive: false, // Controle use INTODUCTION page in the Lesson. set to false if there is no introduction
-          concluActive: false, // Controle use CONCLUSION page in the Lesson. set to false if there is no conclusion
-          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next,É
+          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next
           main: ''
         }
       }
@@ -131,63 +128,81 @@ export default {
     return {
       meta: {},
       videoFull: null,
-      routeData: null,
+      routeData: [],
       changePage: false,
-      appReady: false,
-      wrapperHeigth: null,
-      mediaToShw: {},
       randKey: Math.floor(Math.random() * 10001),
-      popupIsOpen: null,
+      popupIsOpen: false,
       hidePlayBar: false, // Controle visibility of the play bar. set to true to hide play bar
       stmt: null, // holder for xapi statememt,
-      moduleTimer: 0, //tracker for overall time spent the lesson
-      activityTimer: 0, // tracker for the time spent on activity,
       routeChangeCounter: 0,
       toolTipTarget: '', //for the tool tip,
       onboardingMessages: {}, //for the onboarding @todo replace with default file
-      settingsSelected: {}
+      settingsSelected: {},
+      compID: null,
+      rightSidebarVisible: false,
+      lastInFocus: null,
+      closeDelay: false,
+      timeOut: null,
+      infocusTabIndex: null,
+      transcriptVisible: false,
+      transcriptContent: null,
+      transcriptContainer: null,
+      branchingVisible: false,
+      customContentVisible: false,
+      customContent: null,
+      lessonCompletionStatus: false,
+      rightSidebarEvent: new CustomEvent('sidebarEvent', {
+        bubbles: true,
+        detail: {
+          text: () => 'this is a test',
+          name: 'sidebarEvent'
+        }
+      }),
+      lessonStarted: false
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getCurrentPage',
+      'getCurrentBranchPage',
       'getAppStatus',
       'getUserInteraction',
       'getModuleInfo',
-      'getCurrentBrowser',
       'getAllActivities',
       'getAllCompleted',
       'getConnectionInfo',
       'hasMediaElOrTimeline',
-      'getModuleChildren',
-      'getAllActivities',
-      'getPageData',
       'getMenuSettings',
-      'getCurrentSection',
       'getRouteHistory',
       'getOnboardingEnabled',
-      'getApplicationSettings'
+      'getApplicationSettings',
+      'getCompStatusTracker',
+      'getLessonPosition',
+      'getCompletionState'
     ]),
-
-    isReady() {
-      let readyState
-      if (this.getAppStatus === 'loading') readyState = false
-      else if (this.getAppStatus === 'ready') readyState = true
-      return readyState
+    isMenu() {
+      return this.$route.name === 'menu'
+    },
+    appReady() {
+      return this.getAppStatus === 'ready' ? true : false
     },
-
     hasMedia() {
       return typeof this.hasMediaElOrTimeline === 'object'
     },
+    activityHasChanged() {
+      const rd = this.routeData.toReversed()
 
-    displayLang() {
-      let lang = false
-      const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
+      const routeWasMenu =
+        this.$router.options.history.state.back &&
+        this.$router.options.history.state.back.includes('menu')
 
-      if (this.getModuleInfo.packageType === 'xapi') {
-        lang = displayList.find((l) => l.includes(this.$i18n.locale))
-      }
-      return lang
+      if (
+        rd.length <= 1 ||
+        rd[0].activity_ref !== this.$route.meta.activity_ref ||
+        routeWasMenu
+      )
+        return true
+      else return false
     },
     /**
      * @description Set the id the module
@@ -203,7 +218,8 @@ export default {
     theTitle() {
       let title = this.$t(`text.place_holder.for_lesson_title`)
 
-      if (this.moduleConfig.title) title = this.moduleConfig.title
+      if (this.getMenuSettings.lessonTitle)
+        title = this.getMenuSettings.lessonTitle
       return title
     },
     /**
@@ -217,24 +233,12 @@ export default {
         description = this.moduleConfig.description
       return description
     },
-    /**
-     * @description Set default value for bookmark
-     */
-    bookmarkActive() {
-      let bookmarkState
-
-      if (this.moduleConfig.bookmarkActive)
-        bookmarkState = this.moduleConfig.bookmarkActive
-      else bookmarkState = false
-      return bookmarkState
-    },
     /**
      * @description set Previous/Next can allow navigation between activities.
      *
      */
     theNavigationBetweenActivity() {
       let navBwteenActivity = false
-
       if (this.moduleConfig.allowNavigationToActivity)
         navBwteenActivity = this.moduleConfig.allowNavigationToActivity
       return navBwteenActivity
@@ -245,7 +249,6 @@ export default {
      */
     theIntroIsActivated() {
       let introActive = false
-
       if (this.moduleConfig.introActive)
         introActive = this.moduleConfig.introActive
       return introActive
@@ -259,108 +262,186 @@ export default {
       if (!mainEl) return this.$route.meta.id
 
       return mainEl
+    },
+    dynamicSidebarContent() {
+      if (
+        !this.transcriptVisible &&
+        !this.branchingVisible &&
+        !this.customContentVisible
+      )
+        return null
+      let sidebarSettings = {}
+      let _label = null
+      //=========================================
+      switch (true) {
+        case this.transcriptVisible:
+          _label =
+            this.$i18n.locale === 'fr'
+              ? 'Contenu de la transcription'
+              : 'Content of the transcript'
+
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.transcriptContent,
+              id: 'transcript-content'
+            },
+            _context: 'ctxTranscript',
+            _container: this.transcriptContainer,
+            _label,
+            _id: 'transcript'
+          }
+          break
+
+        case this.branchingVisible: {
+          const allActivities = fileAssets.getActivities()
+          if (this.$route.meta.type !== 'branching' || !this.compID) return null
+
+          const componentName = this.compID
+          const { activityRef } = this.getCurrentPage //get activity id from current page
+
+          _label =
+            this.$i18n.locale === 'fr'
+              ? "contenu de l'embranchement"
+              : 'content of the branching'
+
+          sidebarSettings = {
+            _component: defineAsyncComponent(async () => {
+              const compFile = allActivities.filter((f) => {
+                return f.name.includes(`/${activityRef}/${componentName}`)
+              })[0]
+
+              return compFile.content
+            }),
+
+            _comProps: false,
+            _context: 'ctxBranching',
+            _label,
+            _id: componentName
+          }
+          break
+        }
+
+        case this.customContentVisible:
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.customContent
+            },
+            _context: 'ctxCustomContent',
+            _label,
+            _id: 'custom-content'
+          }
+          break
+      }
+
+      return sidebarSettings
+    },
+    navigationHistory() {
+      return this.getRouteHistory
     }
   },
   watch: {
-    $route: {
+    navigationHistory: {
       handler() {
-        if (this.getRouteHistory) {
-          this.routeData = this.getRouteHistory
-        } else {
-          this.routeData = []
-        }
-
-        this.$router.beforeResolve((to, from, next) => {
-          this.updateContent(to, from, next)
-          if (!this.routeData.length) {
-            this.routeData.push(from.meta)
-            this.$store.dispatch('setRouteHistory', this.routeData)
-          }
+        this.routeData = this.navigationHistory
+      },
+      deep: true,
+      immediate: true
+    },
+    $route: {
+      handler(newValue) {
+        this.getFocusables().then((r) => {
+          //Pressing Tab or Shit + tab should make it possible to cycle focus through them
+          if (!r) return
+          r[0].focus()
+          this.infocusTabIndex = r[0]
         })
 
         //update the routeChangeCounter when navigation
         if (this.routeChangeCounter < 3) this.routeChangeCounter += 1
 
-        this.routeData.push(this.$route.meta)
+        /*
+         *Start Timer on New activities
+         */
 
-        if (this.routeData.length >= 4) {
-          this.routeData.shift()
+        const trackedRouteType = [
+          'introduction',
+          'conclusion',
+          'normal',
+          'branching'
+        ]
+        if (trackedRouteType.includes(this.$route.meta.type)) {
+          //Navigation should only trigger timer and xapi statement when app is ready and activity has changed
+          if (!this.activityHasChanged || !this.appReady) return
+
+          //Start the timer every time route is a new activity
+          this.$bus.$emit('start-timer')
+          //Send statement when activity as changed
+          this.sendStartStatement({ id: this.$route.meta.activity_ref })
         }
+        this.transcriptVisible = false
+      },
+      deep: true,
+      immediate: true
+    },
 
-        this.$store.dispatch('setRouteHistory', this.routeData)
+    appReady: {
+      async handler(newValue) {
+        //Should only start timer when the app has fully loaded
 
-        /* send xapi statement only when there is a change of activity:
-           Activity has changed when the type of the route is one of the following or the activity__ref or previous route is different of activity_ref of current route
-         */
-        const trackedRouteType = ['menu', 'introduction', 'activity']
+        if (!this.lessonStarted) this.initLesson()
 
-        if (
-          trackedRouteType.includes(this.$route.meta.type) &&
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const stmt = {
-            id: `${this.$route.name.split('.')[0]}`,
-            description: `${this.$route.name.split('.')[0]} de ${
-              this.getModuleInfo.id
-            }`,
-            definition: `${this.$route.name.split('.')[0]} de ${
-              this.getModuleInfo.id
-            }`
-          }
-
-          //Start the timer every time that there is a new activity
-          if (
-            this.$route.meta.type === 'activity' ||
-            this.$route.meta.type === 'introduction'
-          ) {
-            if (this.timerState === 'started') this.stopTimer('activity') // reset the activity timer
-            this.startTimer('activity')
-          }
-
-          this.sendXapiStatement(stmt)
+        if (this.activityHasChanged && newValue) {
+          this.$bus.$emit('start-timer')
         }
-
-
       },
       immediate: true
     },
+
     /**
-     * @description Defined in Store
+     * @description Defined in Store Watch all completed activities to send a lesson completion statement
      */
-    getAppStatus(newValue) {
-      if (newValue === 'ready') {
-        this.appReady = true
-      } else {
-        this.appReady = false
-      }
+    getAllCompleted: {
+      handler() {
+        // Check once the server to set the completion status of the lesson
+        if (this.getCompletionState) {
+          const completedState = this.getCompletionState
+
+          this.lessonCompletionStatus =
+            !completedState || !completedState.completion
+              ? false
+              : completedState.completion
+        }
+
+        if (!this.lessonCompletionStatus) this.sendCompletionStatus('LESSON')
+      },
+      deep: true,
+      immediate: true
     },
     /**
-     * @description Defined in Store Watch all completed activities to send a lesson completion statement
+     * @description Defined in timerMixin Watch The epalsed time for autosaving the user reached position
      */
-    getAllCompleted: {
+    elapsedIdleTime: {
       handler() {
+        if (this.appTimer.getTimerState() !== 'started') return
+
+        //send a statement every x time (second)
         if (
+          this.elapsedIdleTime % 500 === 0 &&
           this.getModuleInfo.packageType === 'xapi' &&
           this.getConnectionInfo &&
           this.getConnectionInfo.actor &&
           this.getConnectionInfo.remote
         ) {
-          //======================================================
-          let completedSize = 0
-          Object.entries(this.getAllCompleted).forEach((value) => {
-            completedSize = completedSize + value[1].length
-          })
-          const completedState = this.$xapi._getLessonStatus(
-            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-            this.getConnectionInfo.activity_id
-          )
+          const lessonPosition = this.getLessonPosition
+
+          const lastReached = lessonPosition.length ? lessonPosition[0] : ''
 
+          //only Send savepoint statement when 3 navigation happen and the route is different from last saved
           if (
-            completedSize === this.getAllActivities.pageSize &&
-            !completedState.completion
+            this.routeChangeCounter >= 3 &&
+            lastReached !== this.$route.name
           ) {
             let text
             //Defining the text to display for stmt description and definition
@@ -377,101 +458,68 @@ export default {
                 break
             }
 
-            // Retrive only user data in lessons front its interaction that we want to send to the LRS.
-            // Note: User Settings are sent on a different URI and statement
-            const {
-              isFistTime,
-              userSettings,
-              ...lessonsData
-            } = this.getUserInteraction
-
-            this.sendXapiStatement({
-              verb: 'completed',
+            //Creating custom statment
+            const stmt = {
+              verb: 'progressed',
               definition: text,
               description: text,
-              extension: [
+              extensions: [
                 {
-                  id: 'user-data',
-                  content: {
-                    routeHistory: this.getRouteHistory,
-                    ...lessonsData
-                  }
+                  id: 'ending-point',
+                  content: (() =>
+                    this.$route.name == 'menu'
+                      ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                          ._namedRoute
+                      : this.$route.name)()
                 }
               ],
-              duration: this.lessonDuration,
-              completion: true
-            })
-          }
-        }
-
-        //================================================================
-      },
-      immediate: true
-    },
-    /**
-     * @description Defined in timerMixin Watch The epalsed time for autosaving the user reached position
-     */
-    elapsedTime() {
-      if (this.timerState !== 'started') return
-      //send a statement every x time (second)
-      if (
-        (this.timerState === 'started',
-        this.elapsedTime % 30 === 0 &&
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote)
-      ) {
-        const lastReached = this.$xapi._getLessonPosition(
-          this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-          this.getConnectionInfo.activity_id
-        )[0]
-
-        //only Send savepoint statement when 3 navigation happen and the route is different from last saved
-        if (this.routeChangeCounter >= 3 && lastReached !== this.$route.name) {
-          let text
-          //Defining the text to display for stmt description and definition
-          switch (this.$i18n.locale) {
-            case 'fr':
-              if (this.getModuleInfo.courseID)
-                text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-              else text = `Le ${this.getModuleInfo.id}`
-              break
-            case 'en':
-              if (this.getModuleInfo.courseID)
-                text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-              else text = `The ${this.getModuleInfo.id}`
-              break
-          }
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration)
+            }
 
-          //Creating custom statment
-          const stmt = {
-            verb: 'progressed',
-            definition: text,
-            description: text,
-            extension: [
-              {
-                id: 'ending-point',
-                content: this.$route.name
-              }
-            ],
-            duration: this.lessonDuration
+            this.$bus.$emit('send-xapi-statement', stmt)
+            this.routeChangeCounter = 0 //reset counter after saving
           }
-
-          this.sendXapiStatement(stmt)
-          this.routeChangeCounter = 0 //reset counter after saving
         }
-      }
+      },
+      immediate: true,
+      deep: true
     }
   },
-
+  beforeUnmount() {
+    //Communication events
+    this.$bus.$off('close-sidebar', this.closeSidebar)
+    this.$bus.$off('open-sidebar', this.openSidebar)
+    this.$bus.$off('open-popup', this.openPopup)
+    this.$bus.$off('close-popup', this.closePopup)
+    this.$bus.$off('start-onboarding', this.startOnboarding)
+    this.$bus.$off('videoFullScreen', this.onVideoFullScreen)
+    this.$bus.$off('save-to-scorm', this.saveToScorm)
+    this.$bus.$off('launch-xapi-resource', this.launchResource)
+    this.$bus.$off('update-route-history', this.updateRouteHistory)
+    this.$bus.$off('update-content', this.updateContent)
+    this.$bus.$off('show-transcript', this.openTranscript)
+    this.$bus.$off('send-completion-event', this.sendCompletionStatus)
+    this.$bus.$off('send-starting-event', this.sendStartStatement)
+
+    //nav mouseleave event
+    let nav = document.getElementById('navTool')
+    if (nav) {
+      nav.removeEventListener('mouseleave', this.onNavMouseleave)
+    }
+    //sidebar scroll event
+    const rightSidebar = this.getRightSidebar()
+    if (rightSidebar) {
+      rightSidebar.removeEventListener('scroll', this.handleRightSidebarScroll)
+    }
+    //keayboard listener
+    document.removeEventListener('keydown', this.handleKeyboardControls)
+  },
   created() {
-    //TODO: get course name from app settings
     let lessonLabel, lessonNumber, lessonTitle, titleString
     lessonLabel = this.$t('text.lesson')
     lessonNumber = this.moduleConfig.id.replace('module_', '')
     lessonTitle = this.theTitle
-    titleString = lessonLabel + ' ' + lessonNumber + ' : ' + lessonTitle
+    titleString = lessonLabel + ' ' + lessonNumber + ' – ' + lessonTitle
 
     //Remove prefix for introduction or conclusion, according to isIntroConclu setting in Module.vue
     if (typeof this.moduleConfig.isIntroConclu !== 'undefined') {
@@ -480,78 +528,186 @@ export default {
       }
     }
     document.title = titleString
-
-    this.wrapperHeigth = `height:${window.innerHeight - 55}px`
+    document.addEventListener('sidebarEvent', (e) => {
+      // e. e.checkVisibility()
+      this.$bus.$emit(
+        'side-bar-open',
+        e.target.checkVisibility({
+          opacityProperty: true,
+          visibilityProperty: true,
+          contentVisibilityAuto: true
+        })
+      )
+    })
     // Tell the store the state of intro and conclusion
-    this.$store.commit('UPDATE_INTRO_STATE', this.theIntroIsActivated)
-
+    this.updateIntroStatus(this.theIntroIsActivated)
     //Communication events
-    this.$bus.$on('open-popup', (data) => {
-      this.openPopup(data)
-    })
+    this.$bus.$on('open-popup', this.openPopup)
 
-    this.$bus.$on('close-popup', () => {
-      this.closePopup()
-    })
+    this.$bus.$on('close-popup', this.closePopup)
 
-    this.$bus.$on('start-onboarding', (data) => {
-      this.startOnboarding(data)
-    })
+    this.$bus.$on('start-onboarding', this.startOnboarding)
 
-    this.$bus.$on('update-page', () => {
-      this.mediaToShw = this.formateData(this.getCurrentPage)
-    })
+    this.$bus.$on('open-sidebar', this.openSidebar)
 
-    this.$bus.$on('videoFullScreen', (value) => {
-      this.videoFull = value
-    })
+    this.$bus.$on('close-sidebar', this.closeSidebar)
 
-    this.$bus.$on('save-to-scorm', () => {
-      this.saveToScorm()
-    })
+    this.$bus.$on('videoFullScreen', this.onVideoFullScreen)
 
-    this.$bus.$on(
-      'send-xapi-statement',
-      (statement, cb = null, option = false) => {
-        this.sendXapiStatement(statement, cb, option)
-      }
-    )
-
-    this.$bus.$on('launch-xapi-resource', (res) => {
-      this.launchResource(res)
-    })
+    this.$bus.$on('save-to-scorm', this.saveToScorm)
 
-    this.$bus.$on('fire-exit-event', this.endLesson)
+    this.$bus.$on('launch-xapi-resource', this.launchResource)
 
-    this.$bus.$on('set-comp-status', (name, status) =>
-      this.updateTracker(name, status)
-    )
-    this.initLesson()
+    this.$bus.$on('update-route-history', this.updateRouteHistory)
+    this.$bus.$on('update-content', this.updateContent)
+    this.$bus.$on('show-transcript', this.openTranscript)
+    this.$bus.$on('send-completion-event', this.sendCompletionStatus)
+    this.$bus.$on('send-starting-event', this.sendStartStatement)
 
-    if (this.getRouteHistory.length != 0) {
-      this.routeHistory = this.getRouteHistory
+    if (this.navigationHistory.length != 0) {
+      this.routeData = this.navigationHistory
     }
     setTimeout(() => {
       this.settingsSelected = { ...this.getApplicationSettings }
     }, 800)
   },
-
   mounted() {
-    setTimeout(() => {
-      this.updateTracker('AppBaseModule', 'loading')
-      const { autoplay, onboarding } = this.getApplicationSettings
-      let canShowSplash = false
-
-      if (typeof autoplay !== 'undefined' && autoplay === null)
-        canShowSplash = true
-      if (typeof onboarding !== 'undefined' && onboarding === null)
-        canShowSplash = true
-      if (canShowSplash) this.showSplash()
-
-      this.updateTracker('AppBaseModule', 'ready')
-    }, 1500)
+    let nav = document.getElementById('navTool')
+
+    if (nav) nav.addEventListener('mouseleave', this.onNavMouseleave)
+
+    document.addEventListener('keydown', this.handleKeyboardControls)
   },
   methods: {
+    ...mapActions(useAppStore, [
+      'updateIntroStatus',
+      'updateCurrentTimeline',
+      'updateCurrentMediaElements',
+      'updateCurrentPage',
+      'updatesideBIsOpen',
+      'setCompletionState',
+      'updatepopIsOpen'
+    ]),
+    onNavMouseleave() {
+      let widgetOpen = document.getElementsByClassName('open')
+
+      if (widgetOpen.length == 0) {
+        this.cancelTimeout()
+        this.closeDelay = true
+        this.startTimeout()
+      } else {
+        this.closeDelay = true
+      }
+    },
+    onVideoFullScreen(value) {
+      this.videoFull = value
+    },
+    /* Get All Element related to the media  return a list of all DOM element*/
+    async getFocusables() {
+      return new Promise(function (resolve, reject) {
+        setTimeout(function () {
+          const getAllFocusables = () => {
+            const listItems = document.querySelectorAll('.v-media')
+            if (!listItems || !listItems.length) return null
+            return Array.from(listItems)
+          }
+          resolve(getAllFocusables())
+        }, 200)
+      })
+    },
+    /**
+     * @description Handle Keyboard controls
+     * @summary
+     * @param {Object} evt  - event that fired the action
+     *
+     */
+    async handleKeyboardControls(evt) {
+      let { code } = evt
+
+      if (code === 'Escape' && this.rightSidebarVisible) {
+        this.closeSidebar(this.dynamicSidebarContent._context)
+      }
+    },
+
+    /**
+     * @description open the right sidebar component and show and set it content
+     * @summary opens sidebar according to context
+     * @param {Object} obj {ctx , e} - context and content to display in the sidebar
+     *
+     */
+    openSidebar(obj) {
+      if (!obj || !obj.ctx || !obj.e) return
+      const wrapper = obj.w ? obj.w : null
+      this.lastInFocus = document.activeElement
+      const { ctx, e: content, persist = false } = obj
+
+      switch (ctx) {
+        case 'ctxTranscript':
+          this.openTranscript(content, wrapper)
+          break
+
+        case 'ctxBranching':
+          if (this.compID === content && !persist)
+            return this.closeSidebar('ctxBranching')
+
+          this.openBranchContent(content)
+          break
+        case 'ctxCustomContent':
+          this.displayCustomContent(content, wrapper)
+          break
+      }
+      //delay animation
+      this.rightSidebarVisible = true
+      this.updatesideBIsOpen(this.rightSidebarVisible)
+      // setTimeout(() => {
+      const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
+      if (!rightSidebarContent) return
+      rightSidebarContent.scrollTop = 0
+      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+      rSidebar.dispatchEvent(this.rightSidebarEvent)
+      rSidebar.setAttribute('tabindex', -1)
+      this.resetFocus(rSidebar) //set focus on the sidebar
+      // }, 100)
+    },
+    /**
+     * @description close the right sidebar component
+     * @summary close sidebar according to context
+     * @param {String}  ctx - context in which side bar was opened and will now be closed
+     *
+     */
+    closeSidebar(ctx, wrapper = null) {
+      //delay animation
+      this.rightSidebarVisible = false //
+      setTimeout(() => {
+        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+        if (!rSidebar) return
+        rSidebar.setAttribute('style', 'display:none')
+        rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
+      }, 100)
+      this.resetFocus(this.lastInFocus)
+      switch (ctx) {
+        case 'ctxTranscript':
+          this.closeTranscript(wrapper)
+          break
+
+        case 'ctxBranching':
+          this.closeBranchContent()
+          break
+
+        case 'ctxCustomContent':
+          this.closeCostumContent()
+          break
+
+        default:
+          this.branchingVisible = false
+          this.transcriptVisible = false
+          this.customContentVisible = false
+          this.transcriptContent = null
+          this.customContent = null
+          this.compID = null
+      }
+      this.updatesideBIsOpen(this.rightSidebarVisible)
+    },
     /**
      * @description to close a pop up (not currently used)
      * @param {Function} [cb]
@@ -560,6 +716,7 @@ export default {
     closePopup(cb) {
       this.popupIsOpen = false
       this.$bus.$emit('popup-close', cb)
+      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
     },
     /**
      * @description to open a pop up
@@ -567,9 +724,9 @@ export default {
      * @fires popup-open to AppBasePopup.vue
      */
     openPopup(data) {
-      this.popUpData = data // change the data in the popup
-      this.$bus.$emit('popup-open', data) // Use to send message to popUp component
       this.popupIsOpen = true
+      this.$bus.$emit('popup-open', data) // Use to send message to popUp component
+      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
     },
 
     /**
@@ -589,60 +746,113 @@ export default {
       this.$bus.$emit('tooltip-open', data) // Use to send message to tooltip component
     },
 
-    //===== splash screen methods ======//
     /**
-     * @description to show settings Splash screen
+     * @description Manage opening of sidebar in transcript context
+     * @summary set the value of the transcriptContent and transcripVisibility
+     * @param {Object} c content to display in the sidebar
+     */
+
+    openTranscript(c, container) {
+      if (!c) return (this.transcriptVisible = false)
+      //Change transcript content
+      if (this.transcriptContent !== c) this.transcriptContent = c
+
+      this.transcriptContainer = container
+      this.transcriptVisible = true
+    },
+    /**
+     * @description Manage closing of sidebar in transcript context
+     * @summary reset the value of the transcriptContent and transcripVisibility
+     * @fires 'transcript-hidden'  to AppCompPlaybar
      */
-    showSplash() {
-      this.$refs['splashscreen'].show()
-      this.$set(this.getUserInteraction, 'isFirstTime', false)
+    closeTranscript(container = this.transcriptContainer) {
+      let t = this.customContentVisible ? 10 : 200
+      setTimeout(() => {
+        this.transcriptContent = null
+        this.transcriptVisible = false
+      }, t)
+      this.$bus.$emit('transcript-hidden')
+      this.$bus.$emit('resize-media', 'lg', container)
     },
 
     /**
-     * @description to close settings splash screen
-     * @fires save-settings to AppCompSettingsMenu.vue
+     * @description Handle the content of the branch page to display in the right sidebar.
+     * @summary When call set the value of compID and the branching visibility Attach lister for scroll event in the sidebar
+     * @param {Object} branchID - ID OF the Component That to retrieve
+     * @fires 'branch-page-viewed' to $PageMixins when scroll in branch page reaches the bottom
      */
-    onSplashClose() {
-      //set autoplay to false by default when user does not make a choice and close splash-screen.
-      if (this.settingsSelected.autoplay === null)
-        this.settingsSelected.autoplay = false
+    openBranchContent(branchID) {
+      this.branchingVisible = true
+      this.compID = branchID //set compenent ID
+      setTimeout(() => {
+        const rightSidebar = this.getRightSidebar()
+        //Should indicate that page is completed when the Rightsidebar content heigh is less then window height
+        if (rightSidebar.scrollHeight <= window.innerHeight) {
+          if (!this.getCurrentBranchPage) return
+          let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
+          this.getCurrentBranchPage.state = 'completed' // update the state of this branch
+          userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
+          this.$bus.$emit('branch-page-viewed')
+        }
 
-      //set on boarding to false by default if it is defined and its value is null
-      if (
-        typeof this.settingsSelected.onboarding !== 'undefined' &&
-        this.settingsSelected.onboarding === null
-      )
-        this.settingsSelected.onboarding = false
+        rightSidebar.addEventListener('scroll', this.handleRightSidebarScroll)
+      }, 300)
+    },
+
+    /**
+     * @description Close the branch page in the right sidebar
+     * and update the current page data with the parent of the branch page
+     *
+     * @summary When call remove listner for scroll event in the sidebar , reset compID and branch visibility
+     * @fires 'branching-hidden' to AppCompButtonProgress
+     */
+    closeBranchContent() {
+      const rightSidebar = this.getRightSidebar()
+
+      if (!rightSidebar) return
 
-      this.$bus.$emit('save-settings', this.settingsSelected) //save to db
+      rightSidebar.removeEventListener('scroll', this.handleRightSidebarScroll)
+
+      setTimeout(() => {
+        this.compID = null //reset the comp
+        this.branchingVisible = false
+      }, 300)
+      this.$bus.$emit('branching-hidden')
+      this.updateContent(this.$route) // update the content of the current page
+    },
+
+    displayCustomContent(c, container) {
+      if (!c) return (this.customContentVisible = false)
+      //Change transcript content
+      if (this.transcriptVisible) this.closeTranscript()
+      //Change transcript content
+      this.customContent = c
+      this.customContentContainer = container
+      this.customContentVisible = true
+    },
+
+    closeCostumContent() {
+      this.customContentContainer = null
+      this.customContentVisible = false
     },
 
     /**
      * @description reset the values of state (currentTimeline,currentMedialement, currentPage, media duration, appStatus')in the store
      */
     async unload() {
+      if (!this.getCurrentPage || Object.keys(this.getCurrentPage).length == 0)
+        return
+
       return new Promise((res) => {
-        this.$store.dispatch('updateCurrentTimeline', '')
-        this.$store.dispatch('updateCurrentMediaElement', '')
-        this.$store.dispatch('updateCurrentPage', {})
-        this.updateTracker('AppBaseModule', 'loading')
-        res(this.$store.state.$appStore.compStatusTracker)
+        this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
+        this.updateCurrentTimeline(null)
+        this.updateCurrentMediaElements([])
+        // this.updateCurrentPage({})
+        this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
+        res(this.getCompStatusTracker)
       })
     },
 
-    /**
-     * @description fetch a page from the store
-     */
-    async fetchPage() {
-      const fetched = await new Promise((resolve) => {
-        // get current page after 200 milliseconds
-        this.mediaToShw = false
-        setTimeout(() => {
-          resolve(this.getCurrentPage)
-        }, 200)
-      })
-      return fetched
-    },
     /**
      * @description get User data
      */
@@ -692,92 +902,44 @@ export default {
         }
       } else return false
     },
+    /**
+     * @description Initialize the lesson
+     * - check the package type and launch the lesson accordingly
+     * - update the content of the current page in the store with data of the page requested
+     */
     async initLesson() {
-      await this.unload().then(() => {
-        const packageType = this.getModuleInfo.packageType
-        switch (packageType) {
-          case 'scorm': {
-            // launching the lesson (if the lesson is not already completed)
-            const lessonStatus = this.$scorm.GetValue(
-              'cmi.core.lesson_status',
-              true
-            )
-            if (lessonStatus === 'unknown') {
-              this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
-              this.$scorm.Commit() // persist data
-            }
-
-            // check for the bookmark existance in LMS
-            const bookmark = this.$scorm.GetValue(
-              'cmi.core.lesson_location',
-              false
-            )
-
-            // if none stored in the LMS redirect to the 1st page
-            if (
-              !this.bookmarkActive ||
-              bookmark === '' ||
-              bookmark === undefined
-            ) {
-              //Redirect to current page or to menu if route is module
-              this.$route.name && this.$route.name !== 'module'
-                ? this.$router.push({ name: this.$route.name })
-                : this.$router.push({ name: 'menu' })
-            } else if (this.bookmarkActive && bookmark) {
-              this.$router.push({ name: bookmark })
-            }
-            // set the current page
-            this.fetchPage().then((res) => {
-              this.mediaToShw = this.formateData(res)
-              this.updateTracker('AppBaseModule', 'ready')
-            })
-            this.$scorm.getScormAPI()
-            break
+      if (this.lessonStarted) return
+
+      const packageType = this.getModuleInfo.packageType
+      switch (packageType) {
+        case 'scorm': {
+          // launching the lesson (if the lesson is not already completed)
+          const lessonStatus = this.$scorm.GetValue(
+            'cmi.core.lesson_status',
+            true
+          )
+          if (lessonStatus === 'unknown') {
+            this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
+            this.$scorm.Commit() // persist data
           }
-          case 'xapi':
-            {
-              //Check if there is a user connection
-              if (
-                this.getConnectionInfo &&
-                this.getConnectionInfo.actor &&
-                this.getConnectionInfo.remote
-              ) {
-                // check for the bookmark existance in LMS
-                const bookmark = this.$xapi._getLessonPosition(
-                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                  this.getConnectionInfo.activity_id
-                )[0]
-                // if none stored in the LMS redirect to the 1st page
-                if (
-                  !this.bookmarkActive ||
-                  bookmark === '' ||
-                  bookmark === undefined
-                ) {
-                  //Redirect to current page or to menu if route is module
-                  this.$route.name && this.$route.name !== 'module'
-                    ? this.$router.push({ name: this.$route.name })
-                    : this.$router.push({ name: 'menu' })
-                } else if (this.bookmarkActive && bookmark) {
-                  // go to last reached page
-                  this.$router.push({ name: bookmark })
-                }
-              } else {
-                //Redirect to current page or to menu if route is module
-
-                this.$route.name && this.$route.name !== 'module'
-                  ? this.$router.push({ name: this.$route.name })
-                  : this.$router.push({ name: 'menu' })
-              }
-              // set the current page
-              this.fetchPage().then((res) => {
-                this.mediaToShw = this.formateData(res)
-                this.updateTracker('AppBaseModule', 'ready')
-              })
-            }
-            break
+          //Redirect to current page or to menu if route is module
+          this.$route.name && this.$route.name !== 'module'
+            ? this.$router.push({ name: this.$route.name })
+            : this.$router.push({ name: 'menu' })
+          break
         }
-      })
+        case 'xapi':
+          {
+            this.$route.name && this.$route.name !== 'module'
+              ? this.$router.push({ name: this.$route.name })
+              : this.$router.push({ name: 'menu' })
+          }
+          break
+      }
+      this.lessonStarted = true
+      await this.updateContent(this.$route)
     },
+    //=============================================================================
 
     /**
      * @description save interaction or Module state to scrom suspend_data
@@ -787,302 +949,70 @@ export default {
       arg = arg || null
       let existingRecord // hold record record
       let toBeSaved // hold data to send to scorm
+
       if (this.$scorm.initialized) {
         if (this.$scorm.GetValue('cmi.suspend_data') !== '')
           existingRecord = JSON.parse(this.$scorm.GetValue('cmi.suspend_data')) // try convert the scorm record to JSON Obiect
         // create entry for user data if there is no record in Scorm
         if (!existingRecord) existingRecord = {}
-        // There is a passed arg
-        if (arg !== null) {
-          // update only the user record
-          if (arg === 'userInteraction') {
-            // create new entry for user data if does not existe
-            if (!existingRecord['userData']) existingRecord['userData'] = {}
-            // update value of user data
-            existingRecord.userData = this.getUserInteraction
-            toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
-          }
-          // update only the module record
-          else if (arg === 'module') {
-            // create new entry for module data if does not existe
-            if (!existingRecord['moduleData']) existingRecord['moduleData'] = {}
-            // update value for module data
-            toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
-          }
-          // no valid arg
-          else return
-        }
-        // Update module & user record
-        else {
-          // create entry for module and user data if does not existe
-          if (
-            !existingRecord['userData'] &&
-            !existingRecord['moduleData'] &&
-            !existingRecord['routeHistory']
-          ) {
-            existingRecord['moduleData'] = {}
-            existingRecord['userData'] = {}
-            existingRecord['routeHistory'] = []
-          }
-          // update values for module and user data
-          existingRecord.userData = this.getUserInteraction
-          existingRecord.routeHistory = this.routeHistory
-          // update value of user data
-          existingRecord.moduleConfig = JSON.stringify({}) // update value of module data
-          toBeSaved = JSON.stringify(existingRecord)
-        }
+
+        // create new entry for user data if does not existe
+        existingRecord.userData = this.getUserInteraction || {}
+        existingRecord.userSettings = this.getApplicationSettings || {}
+        existingRecord.routeHistory = (() => {
+          const history = this.getRouteHistory.toReversed() //get the route history from the last
+          history[0] = this.$route.meta // change the last recored route to the current route
+          return history.toReversed()
+        })()
+        // update value of user data
+        toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
+
         this.$scorm.SetValue('cmi.suspend_data', toBeSaved) // converte to serialized string and save to scorm
         this.$scorm.Commit() // persist data in LMS
+        if (arg === 'disconnect') this.$scorm.Finish()
       }
     },
     /**
-     * @param {Object} to
-     * @param {Object} from unused
-     * @param {Function} next
+     * @description update content when route change or a page change is requested
+     * - update the information of the current page in the store with data of the page requested
+     *
+     * @param {Object} to destination route
      */
-    updateContent(to, from, next) {
+    async updateContent(to, caller = null) {
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
       if (this.getModuleInfo.packageType === 'scorm')
         this.saveToScorm('userInteraction') //save to scorm
 
-      if (this.popupIsOpen) {
-        //close popup and deactivate the popup animation
-        this.closePopup({ animationOff: true })
-      }
-
-      this.unload().then((res) => {
-        if (res.length) {
-          //======== Handle redirect to correct path when user enter incorrect  path for existing route ====//
-          let toName = null
-          if (!to.name) {
-            toName = to.fullPath.replace(/\//g, ' ').trim() //clean route name
+      await this.unload()
+      const { activity_ref: activity_Id, id: page_Id } = to.meta ? to.meta : to
 
-            //apply apply correct format for routes that concerne an activity
-            if (toName.includes('activite-')) {
-              toName = toName.split(' ')[0].replace('-', '_')
-            }
-            //Go to menu when introactive is false other wise will navigate to introduction
-            else if (
-              toName.includes('introduction') &&
-              !this.theIntroIsActivated
-            )
-              toName = 'menu'
-            next({ name: toName }) //navigate to correct path
-          }
-          //When User inter path to module
-          else if (to.name === 'module') {
-            //Intro is not active set navigation path to menu
-            //if (!this.theIntroIsActivated) toName = 'menu'
-            //Intro active set navigation path to introduction
-            toName = 'menu'
-            next({ name: toName }) //navigate to correct path
-          }
-          //Default redirection
-          else {
-            next()
-          }
-          //===================== Handeling a page request from Store=========================== ====//
-          //get the page from store
-          this.fetchPage().then((res) => {
-            this.mediaToShw = this.formateData(res)
-            this.updateTracker('AppBaseModule', 'ready')
-            //Save current page has bookmark in scorm
-            if (
-              this.getModuleInfo.packageType === 'scorm' &&
-              this.$scorm.initialized &&
-              this.bookmarkActive
-            )
-              this.$scorm.setBookMark(this.$route.name)
-          })
-        }
-      })
+      await this.updateCurrentPage({ activity_Id, page_Id }, caller)
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
     },
 
     /**
-     * @description Send a custom statement to the lrs. Receive some custom params and build a statement to send
-     * @param {Object} stmtObj
-     * @param {Function} cb
+     * @description update the route history when navigation happen
+     * @param {Object} from - origin route
+     *
      */
-    sendXapiStatement(stmtObj, cb = null, withFetch = false) {
-      cb = cb || null
-      const crsParams = this.getModuleInfo
-
-      if (
-        this.getConnectionInfo &&
-        this.getConnectionInfo.actor &&
-        this.getConnectionInfo.remote
-      ) {
-        const {
-          id,
-          result = null,
-          definition,
-          objectType,
-          type,
-          description,
-          verb,
-          extension,
-          duration,
-          completion,
-        } = stmtObj
-        //unload
-        //define the activity id
-        let activityId
-        //=========================== activity ID of Object ==========================================
-        /*
-         * Define the acitivity id of the stmt according to following:
-         * The statement is sent at component/ element level : there is Id and Id is not null (id of the element)
-         * The statement is sent at module level. there is no id
-         *  the Statement must be sent at the course level: There course_id exist and id is the course_id
-         */
-
-        if (id && id !== crsParams.courseID)
-          activityId = `${this.getConnectionInfo.activity_id}/${id}`
-        else if (crsParams.courseID && id === crsParams.courseID)
-          activityId = this.getConnectionInfo.activity_id.replace(
-            `/${crsParams.id}`,
-            ''
-          )
-        else activityId = `${this.getConnectionInfo.activity_id}`
-
-        //define the statement object
-        let stmt = {
-          actor: this.getConnectionInfo.actor,
-          verb: (() => {
-            if (verb && this.$xapi.verbs[verb.trim()])
-              return this.$xapi.verbs[verb.trim()]
-            else {
-              //check if the agent exist in the learning record for this activity
-              // to determine wether he is lunching the activity or resuming the activity
-              if (
-                this.$xapi._getAgent(
-                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                  activityId
-                )
-              )
-                return this.$xapi.verbs.resumed
-              else return this.$xapi.verbs.started
-
-            }
-          })(),
-          object: {
-            id: activityId,
-            definition: {
-              name: {
-                [this.displayLang]: `${definition}`
-              },
-              description: {
-                [this.displayLang]: `${description}`,
-                type: type || 'http://activitystrea.ms/schema/1.0/page'
-              }
-            },
-            objectType: objectType || 'Activity'
-          },
-          context: {
-            contextActivities: {}
-          }
-        }
-        //===================== contextActivity parent =====================//
-        /*
-         Define parent in the contextActivity
-         When:
-        1- when we have the id (parent === module)
-        2- when with have no id but we have a course_id (parent is cours_id)
-        */
-        const activityParent = (() => {
-          if (crsParams.courseID && !id)
-            return {
-              id: this.getConnectionInfo.activity_id.replace(
-                `/${crsParams.id}`,
-                ''
-              ),
-              objectType: objectType || 'Activity'
-            }
-          else if (id && id !== crsParams.courseID)
-            return {
-              id: `${this.getConnectionInfo.activity_id}`,
-              objectType: objectType || 'Activity'
-            }
-          else return null
-        })()
-
-        // Add the parent key of the context activity
-        if (activityParent)
-          stmt.context.contextActivities['parent'] = [activityParent]
+    updateRouteHistory(from) {
+      //The route is not in the history: should be push at the end of the history
+      const targetIndex = this.routeData.findIndex((r) => {
+        if (r.type === 'pg_menu' && r.id === from.meta.id) return r
+        else if (
+          `${r.activity_ref}_${r.id}` ===
+          `${from.meta.activity_ref}_${from.meta.id}`
+        )
+          return r
+      })
 
-        //===================== contextActivity grouping =====================//
+      //Remove route from history if already in
+      if (targetIndex !== -1) this.routeData.splice(targetIndex, 1)
 
-        //Defining the Grouping of the context activity
-        const activityGrouping = (() => {
-          if (
-            activityParent &&
-            crsParams.courseID &&
-            activityParent.id.includes(crsParams.id)
-          )
-            return {
-              id: this.getConnectionInfo.activity_id.replace(
-                `/${crsParams.id}`,
-                ''
-              )
-            }
-          else return null
-        })()
-        //Adding the grouping of the context activity
-        if (activityGrouping)
-          stmt.context.contextActivities['grouping'] = [activityGrouping]
-
-        //add result data to statement
-        if (result) stmt['result'] = result
-
-        // Add duration info to statment when activity is complete
-        if (verb === 'completed' || verb === 'suspended' || verb === 'exited') {
-          if (!stmt.result) stmt.result = {} // check if exist
-
-          let d
-
-          duration
-            ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
-                duration.split(':')[2]
-              }S`)
-            : (d = `PT${this.activityDuration.split(':')[0]}H${
-                this.activityDuration.split(':')[1]
-              }M${this.activityDuration.split(':')[2]}S`)
-
-          stmt.result['duration'] = d
-          //Set the completion status of the result
-          if (completion) stmt.result['completion'] = completion
-        }
+      // Add route route in history
+      this.routeData.push(from.meta)
 
-        // ===================== Extension of the Object definition =====================//
-        if (
-          extension &&
-          extension.constructor === Array &&
-          extension.length > 0
-        ) {
-          //Validate each entry given in the extension Array
-          extension.forEach((e) => {
-            //entry must be of type Object
-            if (e.constructor !== Object)
-              throw new Error(`'${e}' is not a valid value. Must be Object`)
-
-            //Entry Must have id and content keys
-            const validKey = ['id', 'content']
-            Object.keys(e).forEach((key) => {
-              if (!validKey.includes(key))
-                throw new Error(`Not valid key '${key}' for entry ${e}`)
-
-              //id must be a String
-              if (key === 'id' && e[key] && e[key].constructor !== String)
-                throw new Error(`'${key}' must be of type String`)
-            })
-
-            stmt.object.definition['extensions'] = {
-              ...stmt.object.definition['extensions'],
-              [`${this.getConnectionInfo.activity_id}/${e.id}`]: e.content
-            }
-          })
-        }
-
-        this.$xapi._sendStatement(stmt, cb, withFetch)
-      }
+      if (this.routeData.length >= 4) this.routeData.shift()
     },
 
     /**
@@ -1111,68 +1041,12 @@ export default {
         res.url = `${baseDomain}/${res.url}`
 
       const newUrlToLaunch = `${res.url}?endpoint=${endpoint}&auth=${auth}&actor=${actor}&registration=${registration}&activity_id=${activity_id}`
-
-      this.endLesson(() => {
+      this.routeChangeCounter = 0 //reset counter after saving
+      this.$bus.$emit('fire-exit-event', () => {
         window.location.replace(newUrlToLaunch)
       })
     },
 
-    /**
-     * @param {Function} cb
-     * @param {Bool} option - set if must use Fetch API or not.  default = false
-     */
-    endLesson(cb, option = false) {
-      let text
-
-      //Defining the text to display for stmt description and definition
-      switch (this.$i18n.locale) {
-        case 'fr':
-          if (this.getModuleInfo.courseID)
-            text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-          else text = `Le ${this.getModuleInfo.id}`
-          break
-        case 'en':
-          if (this.getModuleInfo.courseID)
-            text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-          else text = `The ${this.getModuleInfo.id}`
-          break
-      }
-
-      // Retrieve only user data in lessons front its interaction that we want to send to the LRS.
-      // Note: User Settings are sent on a different URI and statement
-      const {
-        isFistTime,
-        userSettings,
-        ...lessonsData
-      } = this.getUserInteraction
-
-      const stmt = {
-        verb: 'exited',
-        definition: text,
-        description: text,
-        extension: [
-          {
-            id: 'ending-point',
-            content: this.$route.name
-          },
-          {
-            id: 'user-data',
-            content: {
-              routeHistory: this.getRouteHistory,
-              ...lessonsData
-            }
-          }
-        ],
-        duration: this.lessonDuration
-      }
-
-      this.sendXapiStatement(stmt, null, option)
-
-      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
-
-      if (cb) cb()
-    },
-
     /**
      * @description start the tutorial for first time users
      * @requires '../assets/data/onboardingMessages.json'
@@ -1188,13 +1062,17 @@ export default {
             this.nextOnboarding('message_1')
           } catch (e) {
             //fetch default values for popups
-            this.onboardingMessages = require('../assets/data/onboardingMessages.json')
+            this.onboardingMessages = import(
+              '../assets/data/onboardingMessages.json'
+            )
             this.nextOnboarding('message_1')
           }
         }
       } else {
         if (this.getOnboardingEnabled) {
-          this.onboardingMessages = require('../assets/data/onboardingMessages.json')
+          this.onboardingMessages = import(
+            '../assets/data/onboardingMessages.json'
+          )
           this.nextOnboarding('message_1')
         }
       }
@@ -1219,8 +1097,6 @@ export default {
           this.toolTipTarget = messages[postNextMessage].value.target
         }
       }
-
-      //check if next message exist
       //check if the next message is a popup or other componant
       if (messages[nextMessage].type == 'popup-avert') {
         this.openPopup(messages[nextMessage])
@@ -1232,29 +1108,22 @@ export default {
      * @description- Skip directly to the main containt*
      * main content is Node with page ID by default
      * Main Content can be defined by front-end using prop "main" in Module.vue of project
+     * @fire {event} 'move-to-target' to AppBase
      */
 
     skipToMain() {
       const { main } = this.moduleConfig // check for main input
-      let skipTo = document.querySelector(`#wrapper-content`) //default definition of main element
-
-      if (main) {
-        let targetEl = document.querySelector(`#${main}`) // search for node element specified as main
 
-        if (targetEl) skipTo = targetEl
-      }
-      let targetTop = skipTo.offsetTop
+      let skipTo = main ? main : 'wrapper-content' // search for node element specified as main
 
-      let scrollOpt = {
-        top: targetTop - 100,
+      //fires event
+      this.$bus.$emit('move-to-target', skipTo, {
+        top: 100, // offset target top to 100 pixel
         left: 0,
-        behavior: 'auto' //auto
-      }
+        behavior: 'auto'
+      })
 
-      //Allowing accessibility control with keyboard
-      skipTo.setAttribute('tabIndex', -1)
-      window.scrollTo(scrollOpt)
-      skipTo.focus()
+      this.$analytics.sendEvent('skip_to_main_content')
     },
 
     /**
@@ -1266,13 +1135,11 @@ export default {
       let err = false
       let errorList = [] //array for errors dectected
       if (onboardingMessages && typeof onboardingMessages == 'object') {
-        //continue
         //check the list of attributes is message_X
         let listMessage = Object.keys(onboardingMessages)
         for (let index = 1; index <= listMessage.length; index++) {
           const element = listMessage[index - 1]
           if (element == 'message_' + index) {
-            //continu
             if (
               onboardingMessages[element] &&
               typeof onboardingMessages[element] == 'object'
@@ -1293,7 +1160,7 @@ export default {
                       //flags error
                       errorList.push('message_' + index + ' type value title')
                       console.warn(
-                        '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                           index +
                           ' type value title is incorrect',
                         'background: orange; color: white; display: block; margin:5px;'
@@ -1307,7 +1174,7 @@ export default {
                       //flags error
                       errorList.push('message_' + index + ' type value content')
                       console.warn(
-                        '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                           index +
                           ' type value content is incorrect',
                         'background: orange; color: white; display: block; margin:5px;'
@@ -1327,7 +1194,7 @@ export default {
                           'message_' + index + ' type value target'
                         )
                         console.warn(
-                          '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                          '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                             index +
                             ' type value target is not found in page',
                           'background: orange; color: white; display: block; margin:5px;'
@@ -1337,7 +1204,7 @@ export default {
                       //flags error
                       errorList.push('message_' + index + ' type value target')
                       console.warn(
-                        '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                           index +
                           ' type value target is incorrect',
                         'background: orange; color: white; display: block; margin:5px;'
@@ -1347,7 +1214,7 @@ export default {
                     //flags error
                     errorList.push('message_' + index + ' type value')
                     console.warn(
-                      '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                      '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                         index +
                         ' type value is incorrect',
                       'background: orange; color: white; display: block; margin:5px;'
@@ -1358,7 +1225,7 @@ export default {
                 //flags error
                 errorList.push('message_' + index + ' type')
                 console.warn(
-                  '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                  '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                     index +
                     ' type is missing',
                   'background: orange; color: white; display: block; margin:5px;'
@@ -1368,7 +1235,7 @@ export default {
               //flags error
               errorList.push('message_' + index + ' typeof')
               console.warn(
-                '%c WARNING!>>> AppBaseModule: Your onboardingMessages message_' +
+                '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
                   index +
                   ' is not an object',
                 'background: orange; color: white; display: block; margin:5px;'
@@ -1378,7 +1245,7 @@ export default {
             //flags error
             errorList.push('onboardingMessages keys')
             console.warn(
-              '%c WARNING!>>> AppBaseModule: Your onboardingMessages keys does not follow "message_[number]" naming',
+              '%c WARNING!>>> appBaseModule: Your onboardingMessages keys does not follow "message_[number]" naming',
               'background: orange; color: white; display: block; margin:5px;'
             )
           }
@@ -1387,7 +1254,7 @@ export default {
         //flags error
         errorList.push('onboardingMessages')
         console.warn(
-          '%c WARNING!>>> AppBaseModule: Your onboardingMessages is not an Object',
+          '%c WARNING!>>> appBaseModule: Your onboardingMessages is not an Object',
           'background: orange; color: white; display: block; margin:5px;'
         )
       }
@@ -1398,192 +1265,370 @@ export default {
 
       return err
     },
-    updateTracker(name, status) {
-      this.$store.dispatch('updateCompStatusTracker', { name, status })
-    }
-  }
-}
-</script>
-<style lang="scss">
-$heigthNavbar: 55px;
 
-#App-base {
-  .skip-link {
-    left: -999px;
-    position: absolute;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: -999;
-
-    &:focus,
-    &:active {
-      left: auto;
-      top: auto;
-      width: 30%;
-      height: auto;
-      overflow: auto;
-      margin: 10px 35%;
-      padding: 5px;
-      text-align: center;
-      font-size: 1.2em;
-      z-index: 999;
-    }
-  }
-  /********** FM **********/
-  #Loading {
-    width: 100%;
-    position: fixed;
-    z-index: 99999;
-    left: 0;
-    opacity: 0;
-    display: none;
-    transition: opacity 0.5s;
-    pointer-events: none;
-  }
+    /**
+     * @description Reset the focus the element
+     * @param {HTMLElement} e - element that will get focus
+     */
+    resetFocus(e) {
+      if (e) e.focus()
+    },
 
-  &:not(.DR) {
-    /******** loading *******/
-    #Loading {
-      top: 0px;
-      height: 100%;
-    }
-    #primary_nav_wrapper {
-      position: fixed;
-      right: 0;
-      bottom: 95px;
-      z-index: 100;
-      pointer-events: none;
-
-      button {
-        pointer-events: all;
-      }
-    }
-    .app-nav {
-      position: relative;
-      z-index: 10;
-      width: 100%;
-      height: $heigthNavbar;
-      padding: 0;
-      justify-content: center;
-
-      @media screen and (max-width: 1100px) {
-        position: relative;
-        top: 0;
-        transition: top 0.5s ease-out;
-
-        &.show {
-          top: -65px;
-        }
-      }
+    handleRightSidebarScroll(event) {
+      let scrollHeight = null
+      let clientHeight = null
+      let scrollTop = null
 
-      #ActivityMenu {
-        top: inherit;
-        bottom: $heigthNavbar;
-      }
-    }
-  }
-  /********** DR **********/
-  &.DR {
-    #Loading {
-      top: $heigthNavbar;
-      //height: calc($heigthNavbar - 100%);
-    }
-    .app-nav {
-      position: fixed;
-      top: 0;
-      z-index: 10;
-      width: 100%;
-      height: $heigthNavbar;
-      padding: 0;
-      justify-content: center;
-
-      #ActivityMenu {
-        top: $heigthNavbar;
-        bottom: inherit;
+      scrollHeight = event.target.scrollHeight
+      clientHeight = event.target.clientHeight
+      scrollTop = event.target.scrollTop
+
+      // //Set scroll limit reached at 150px above the document height.
+      let scrollLimit = scrollHeight - 150
+      let fullyScrolled = Math.round(clientHeight + scrollTop)
+
+      //consider page completed when scrolled value has reached or passed set limit
+      if (fullyScrolled >= scrollLimit) {
+        event.target.removeEventListener(
+          'scroll',
+          this.handleRightSidebarScroll
+        )
+        let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
+
+        this.getCurrentBranchPage.state = 'completed' // update the state of this branch
+        userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
+
+        setTimeout(() => this.$bus.$emit('branch-page-viewed'), 20)
       }
-      #menu {
-        margin-right: 20px;
+    },
+    getRightSidebar() {
+      let rSidebar = null
+      rSidebar = document.getElementById('right-sidebar')
+      if (!rSidebar) return
+      const rSidebarContent = rSidebar.querySelector(`#right-sidebar-body`)
+      return rSidebarContent
+    },
+
+    startTimeout() {
+      this.timeOut = setTimeout(() => {
+        this.cancelTimeout()
+      }, 3000)
+    },
+    cancelTimeout() {
+      if (this.timeOut) {
+        this.closeDelay = false
+        clearTimeout(this.timeOut)
       }
+    },
+
+    /**
+     * @description Method to handle to sanding of completion status to LRS
+     * determine wether to send a completion for an activity or the Lesson
+     * Completion is sent once
+     * @param {String} context - 'ACTIVITY | LESSON'
+     */
+
+    sendCompletionStatus(context = null) {
+      if (
+        !this.getModuleInfo.packageType === 'xapi' ||
+        !this.getConnectionInfo ||
+        !this.getConnectionInfo.actor ||
+        !this.getConnectionInfo.remote ||
+        !context
+      )
+        return
+
+      let stmt = null
+
+      switch (context) {
+        case 'ACTIVITY': {
+          let text
+          let completedSize = 0
+          Object.entries(this.getAllCompleted).forEach((value) => {
+            completedSize = completedSize + value[1].length
+          })
+          let recordInServerLength,
+            thisActivityProgressLength,
+            thisActivityLength
 
-      .app-ctrl {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        .btn-base {
-          margin: 10px;
+          const thisActivityServerState =
+            this.getUserInteraction[this.$route.meta.activity_ref]
+
+          if (thisActivityServerState)
+            recordInServerLength = Object.keys(thisActivityServerState).length
+
+          thisActivityProgressLength = this.getAllCompleted[
+            this.$route.meta.activity_ref
+          ]
+            ? this.getAllCompleted[this.$route.meta.activity_ref].length
+            : 0
+
+          //get The total length of the current activity
+          thisActivityLength = this.getAllActivities(
+            this.getCurrentPage.activityRef
+          ).pageSize
+
+          if (thisActivityProgressLength !== thisActivityLength) return
+          if (thisActivityProgressLength == recordInServerLength) return
+
+          //Defining the text to display for stmt description and definition
+          const id = this.getCurrentPage.activityRef
+          let aName = ''
+          switch (true) {
+            case id == 'A00':
+              aName = 'Introduction'
+              break
+            case id == 'A99':
+              aName = 'Conclusion'
+              break
+
+            default: {
+              let d = id.replace('A', '').trim()
+              d = parseInt(d)
+              aName = `${this.$t('text.activity')} ${d}`
+            }
+          }
+
+          switch (this.$i18n.locale) {
+            case 'fr':
+              if (this.getModuleInfo.courseID)
+                text = `${aName} de ${this.getModuleInfo.id} `
+              else text = `Le ${this.getModuleInfo.id}`
+              break
+            case 'en':
+              if (this.getModuleInfo.courseID)
+                text = `${aName} of ${this.getModuleInfo.id}`
+              else text = `The ${this.getModuleInfo.id}`
+              break
+          }
+
+          // Retrive only user data in lessons front its interaction that we want to send to the LRS.
+          // Note: User Settings are sent on a different URI and statement
+          const { isFistTime, userSettings, ...lessonsData } =
+            this.getUserInteraction
+          const activityDuration = this.appTimer.getTime()
+          stmt = {
+            id: this.getCurrentPage.activityRef,
+            verb: 'completed',
+            definition: text,
+            description: text,
+            extensions: [
+              {
+                id: 'user-data',
+                content: {
+                  routeHistory: this.getRouteHistory,
+                  ...lessonsData
+                }
+              }
+            ],
+            duration: this.appTimer.ISOTimeParser(activityDuration),
+            completion: true
+          }
+
+          break
         }
-        .md-controller {
-          margin-left: 0px;
-          margin-right: 0px;
-          .ctrl-play {
-            margin-left: 0px;
-            margin-right: 0px;
+
+        case 'LESSON': {
+          //======================================================
+          let completedSize = 0
+          Object.entries(this.getAllCompleted).forEach((value) => {
+            completedSize = completedSize + value[1].length
+          })
+
+          if (completedSize === this.getAllActivities().pageSize) {
+            let text
+            //Defining the text to display for stmt description and definition
+            switch (this.$i18n.locale) {
+              case 'fr':
+                if (this.getModuleInfo.courseID)
+                  text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+                else text = `Le ${this.getModuleInfo.id}`
+                break
+              case 'en':
+                if (this.getModuleInfo.courseID)
+                  text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+                else text = `The ${this.getModuleInfo.id}`
+                break
+            }
+
+            // Retrive only user data in lessons front its interaction that we want to send to the LRS.
+            // Note: User Settings are sent on a different URI and statement
+            const { isFistTime, userSettings, ...lessonsData } =
+              this.getUserInteraction
+
+            stmt = {
+              verb: 'completed',
+              definition: text,
+              description: text,
+              extensions: [
+                {
+                  id: 'user-data',
+                  content: {
+                    routeHistory: this.getRouteHistory,
+                    ...lessonsData
+                  }
+                }
+              ],
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
+              completion: true
+            }
+            this.lessonCompletionStatus = true // set the status of this lesson as completed
+            let completedState = {
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
+              completion: this.lessonCompletionStatus
+            }
+            this.setCompletionState(completedState)
           }
+
+          break
         }
       }
-    }
+      if (!stmt) return
 
-    #primary_nav_wrapper {
-      display: flex;
-      justify-content: center;
-    }
-    #footer-dr {
-      width: 100%;
-      height: $heigthNavbar;
-      justify-content: center;
-      opacity: 1;
-      position: relative;
-      transition: all ease-in 0.5s !important;
-      &.hidden {
-        bottom: (-55px);
-        opacity: 0;
-        pointer-events: none;
-      }
-      .app-ctrl {
-        width: 100%;
-        .col {
-          display: flex;
-          #btn-previous {
-            width: 50%;
-          }
-          #btn-next {
-            width: 50%;
-            position: absolute;
-            right: 0;
-          }
+      this.$bus.$emit('send-xapi-statement', stmt)
+    },
+    /**
+     * @description Method handle start event of activity to LRS
+     * Check if the activity is already initiated in The LRS record to determine wether it a start or a resume
+     * @param {Object} a - Data of the activity
+     * @fires 'send-xapi-statement' to APPBASE
+     */
+
+    sendStartStatement(a) {
+      if (!a) return
+      const { id } = a
+      let aName = null
+
+      switch (true) {
+        case id == 'A00':
+          aName = 'Introduction'
+          break
+        case id == 'A99':
+          aName = 'Conclusion'
+          break
+
+        default: {
+          let d = id.replace('A', '').trim()
+          d = parseInt(d)
+          aName = `${this.$t('text.activity')} ${d}`
         }
       }
+
+      let text =
+        this.$i18n.locale == 'fr'
+          ? `${aName} de ${this.getModuleInfo.id}`
+          : `${aName} of ${this.getModuleInfo.id}`
+
+      /*
+       *Determine if activity as been initialized. Activity is initialized when it is in the serverRecords
+       */
+
+      const thisActivityServerState = this.getUserInteraction[id]
+        ? this.getUserInteraction[id]
+        : {}
+      const recordInServerLength = Object.keys(thisActivityServerState).length
+
+      const stmt = {
+        id,
+        verb: recordInServerLength ? 'resumed' : 'initialized', //determine verb of the statement to send
+        definition: text,
+        description: text
+      }
+      setTimeout(() => this.$bus.$emit('send-xapi-statement', stmt), 500)
     }
   }
 }
+</script>
+<style lang="scss">
+.module {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
 
-#btn_mobile_hide {
-  width: 48px;
-  height: 40px;
-  border: none;
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: -999;
+
+  &:focus,
+  &:active {
+    left: auto;
+    top: auto;
+    width: 30%;
+    height: auto;
+    overflow: auto;
+    margin: 10px 35%;
+    padding: 5px;
+    text-align: center;
+    font-size: 1.2em;
+    z-index: 999;
+  }
+}
+/********** FM **********/
+#Loading {
+  width: 100%;
+  position: fixed;
+  z-index: 99999;
+  left: 0;
+  opacity: 0;
   display: none;
+  transition: opacity 0.5s;
   pointer-events: none;
+}
 
-  @media screen and (max-width: 1100px) {
-    display: block;
-    pointer-events: all;
-    position: absolute;
-    top: 6px;
-    right: 10px;
-    z-index: 10;
+#right-sidebar {
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  max-width: 780px;
+  width: 30%;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  background-color: #ffffff;
+  -webkit-box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
+  box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
+
+  #right-sidebar-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding: 32px 20px 0 32px;
+
+    .embranchement-close {
+      padding: 11px 13px;
+    }
   }
 
-  svg {
-    transition: transform 0.5s ease-out;
-    transform: rotate(180deg);
-
-    &[data-hide='true'] {
-      transform: rotate(0deg);
-    }
+  #right-sidebar-body {
+    max-height: 90%;
+    overflow-y: auto;
   }
 }
+
+.right-sidebar-transition-enter-active {
+  transition: transform 0.33s ease-out;
+}
+
+.right-sidebar-transition-leave-active {
+  transition: transform 0.16s;
+}
+
+.right-sidebar-transition-enter-from,
+.right-sidebar-transition-leave-to {
+  transform: translateX(100%);
+}
 </style>