init sub-components and active tab mechanism

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

@@ -2,43 +2,102 @@
    
    <ul class="nav nav-tabs">
       <li class="nav-item">
-         <a class="nav-link active" aria-current="page" href="#">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyCustoms'}"
+            @load="selectTab('MyCustoms')" @click="selectTab('MyCustoms')">
             <i class="fa fa-home"></i>
          </a>
       </li>
       <li class="nav-item">
-         <a class="nav-link" href="#">
-            Actions d'accompagnement
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyWorks'}"
+            @click="selectTab('MyWorks')">
+            {{ $t('my_works') }}
          </a>
       </li>
       <li class="nav-item">
-         <a class="nav-link" href="#">
-            Évaluations
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyEvaluations'}"
+            @click="selectTab('MyEvaluations')">
+            {{ $t('my_evaluations') }}
          </a>
       </li>
       <li class="nav-item">
-         <a class="nav-link" href="#">
-            Tâches
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyTasks'}"
+            @click="selectTab('MyTasks')">
+            {{ $t('my_task') }}
          </a>
       </li>
       <li class="nav-item">
-         <a class="nav-link" href="#">
-            Parcours
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
+            @click="selectTab('MyAccompanyingCourses')">
+            {{ $t('my_accompanying_courses') }}
          </a>
       </li>
       <li class="nav-item">
-         <a class="nav-link" href="#">
-            Notifications
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyNotifications'}"
+            @click="selectTab('MyNotifications')">
+            {{ $t('my_notifications') }}
          </a>
       </li>
    </ul>
    
-   
+   <div class="my-4">
+      <my-customs
+         v-if="activeTab === 'MyCustoms'">
+      </my-customs>
+      <my-works
+         v-else-if="activeTab === 'MyWorks'">
+      </my-works>
+      <my-evaluations
+         v-else-if="activeTab === 'MyEvaluations'">
+      </my-evaluations>
+      <my-tasks
+         v-else-if="activeTab === 'MyTasks'">
+      </my-tasks>
+      <my-accompanying-courses
+         v-else-if="activeTab === 'MyAccompanyingCourses'">
+      </my-accompanying-courses>
+      <my-notifications
+         v-else-if="activeTab === 'MyNotifications'">
+      </my-notifications>
+   </div>
 </template>
 
 <script>
+import MyCustoms from './MyCustoms';
+import MyWorks from './MyWorks';
+import MyEvaluations from './MyEvaluations';
+import MyTasks from './MyTasks';
+import MyAccompanyingCourses from './MyAccompanyingCourses';
+import MyNotifications from './MyNotifications';
+
 export default {
-   name: "App"
+   name: "App",
+   components: {
+      MyCustoms,
+      MyWorks,
+      MyEvaluations,
+      MyTasks,
+      MyAccompanyingCourses,
+      MyNotifications,
+   },
+   data() {
+      return {
+         activeTab: 'MyCustoms'
+      }
+   },
+   computed: {
+   },
+   methods: {
+      selectTab(tab) {
+         console.log('load tab content', tab);
+         this.activeTab = tab;
+      }
+   }
 }
 </script>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue

@@ -0,0 +1,13 @@
+<template>
+   MyAccompanyingCourses
+</template>
+
+<script>
+export default {
+   name: "MyAccompanyingCourses"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

@@ -0,0 +1,13 @@
+<template>
+   MyCustoms
+</template>
+
+<script>
+export default {
+   name: "MyCustoms"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue

@@ -0,0 +1,13 @@
+<template>
+   MyEvaluations
+</template>
+
+<script>
+export default {
+   name: "MyEvaluations"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue

@@ -0,0 +1,13 @@
+<template>
+   MyNotifications
+</template>
+
+<script>
+export default {
+   name: "MyNotifications"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue

@@ -0,0 +1,13 @@
+<template>
+   MyTasks
+</template>
+
+<script>
+export default {
+   name: "MyTasks"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue

@@ -0,0 +1,13 @@
+<template>
+   MyWorks
+</template>
+
+<script>
+export default {
+   name: "MyWorks"
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js

@@ -1,6 +1,10 @@
 const appMessages = {
     fr: {
-
+        my_works: "Actions d'accompagnement",
+        my_evaluations: "Évaluations",
+        my_task: "Tâches",
+        my_accompanying_courses: "Parcours",
+        my_notifications: "Notifications",
     }
 };