ModificationMenu

src/NervTN.vue

@@ -1,17 +1,12 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
 import NavMessage from './components/message/NavMessage.vue';
+import NavContact from './components/message/NavContact.vue';
 import {useI18n} from 'vue-i18n';
 
 const {t} = useI18n({useScope: 'local'});
 </script>
 
-<script>
-export default{
-    components: {NavMessage}
-}
-</script>
-
 <template>
     <div id="appflex">
         <div id="page">
@@ -25,9 +20,14 @@ export default{
         </div>
         <div id="sidebar" class="sidebar">
             <router-view name="Sidebar"></router-view>
+
             <div id="menu">
                 <NavMessage/>
                 <router-view name="navMessage"></router-view>
+
+                <NavContact/>
+                <router-view name="navContact"></router-view>
+
             </div>
         </div>
         </div>
@@ -36,6 +36,14 @@ export default{
             <img id="main-logo" alt="" src="./assets/logo.svg"/>
             <span id="site-name">{{ t('home.apps') }}</span>
         </router-link>
+<div class="menu">
+    <div class="navMessage">
+      <router-link to="/navMessage">💬 ✉️ {{ t('home.messages') }}</router-link>
+    </div>
+
+    <div class="navContact">
+      <router-link to="/navContact">👤 {{ t('home.contact') }}</router-link>
+    </div>
 
         <div class="nav-menu">
             <details>
@@ -49,6 +57,7 @@ export default{
                 </ul>
             </details>
         </div>
+    </div>
 
         <div class="links">
             <router-view name="Links"></router-view>
@@ -59,6 +68,7 @@ export default{
                 <option value="nl">Nederlands</option>
             </select>
         </div>
+
     </header>
     <footer class="footer">
     </footer>

src/assets/css/sidebar.less

@@ -24,39 +24,48 @@
 }
 
 #menu {
-    font-size: 1.1rem;
-    margin: 0.5rem;
-    padding: 1rem;
-
-    summary {
   padding: 10px;
-    }
+}
+.menu {
+    display: inline-block;
+    margin-left: auto;
+}
+.navMessage{
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
 
-    li {
-        list-style: none;
-    }
+}
+
+.navContact{
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
 }
 
 .nav-menu{
-    margin-left: auto;
-    padding-right: 10px;
-    cursor: pointer;
-}
+  vertical-align: top;
+  float: left;
+  padding: 10px;
+  max-height: 2em;
 
+details{
+  padding: 0 .5em;
+  background: #282828;
+  border-radius: .5em;
+  color: #a0bede;
 
-.connect {
-    padding: 0.5rem;
-
-    ul {
+    li {
         padding: 0;
         margin: 0;
-        list-style-type: none;
+        list-style: none;
+
+      }
     }
 }
 
-.nav-connect {
-    list-style: none;
-}
 
 .nav-links {
     display: inline-block;

src/components/contact/ContactsList.vue

@@ -0,0 +1,11 @@
+
+<template>
+    <h1>Contacts List</h1>
+
+</template>
+
+
+<script>
+
+
+</script>

src/components/contact/contact-routes.js

@@ -1,3 +1,19 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
-
+/*Ne fonctionne pas */
+const router = new VueRouter({
+  routes: [
+    { path: '/navContact', component:NavContact ,
+      children: [
+        {
+          path: '/profile',
+          component: Profile
+        },
+        {
+          path: '/contactsList',
+          component: ContactsList
+        }
+      ]
+    }
+  ]
+})

src/components/contact/contact-state.js

@@ -1,3 +1,13 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
 
+import Vuex from 'vuex';
+
+const store = new Vuex.Store({
+    state: {},
+    mutations: {},
+    actions: {},
+    modules: {}
+});
+
+export default store;

src/components/message/Chat.vue

@@ -2,17 +2,13 @@
 <template>
     <h1>Chat</h1>
 
-    <div
-      :class='["message", { dark }]'>
+    <div  :class='["message", { dark }]'>
 
     <h5>{{ user }}</h5>
     {{ text }}
   </div>
 
-  <ChatBox
-        class='chat-box'
-        @submit='onSubmit'
-    />
+  <ChatBox class='chat-box' @submit='onSubmit'/>
 </template>
 
 

src/components/message/NavContact.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
+<template>
+
+
+        <ul>
+            <li><router-link to="/navContact/profile">📝 {{ t('menu.profile') }}</router-link></li>
+            <li><router-link to="/navContact/contactsList">🗒️ {{ t('menu.contacts list') }}</router-link></li>
+        </ul>
+
+
+    </template>
+
+    <style scoped>
+        li {
+            list-style-type: none;
+        }
+        details {
+            padding-bottom: 5px;
+        }
+    </style>
+
+
+    <i18n lang="json" locale="en" src="./locale/en.json"/>
+    <i18n lang="json" locale="fr" src="./locale/fr.json"/>

src/components/message/NavMessage.vue

@@ -6,26 +6,12 @@ const {t} = useI18n({useScope: 'local'});
 
 <template>
 
-    <details>
-        <summary>
-            <span>👤 {{ t('menu.contact') }}</span>
-        </summary>
     <ul>
-            <li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
-            <li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
+        <li><router-link to="/navMessage/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
+        <li><router-link to="/navMessage/chat">💬 {{ t('menu.chat') }}</router-link></li>
+        <li><router-link to="/navMessage/videoConferencing">🎥 {{ t('menu.video conferencing') }}</router-link></li>
     </ul>
-    </details>
 
-    <details>
-        <summary>
-            <span>💬 ✉️ {{ t('menu.messages') }}</span>
-        </summary>
-        <ul>
-            <li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
-            <li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
-            <li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
-        </ul>  
-    </details> 
 
 </template>
 

src/components/message/locale/en.json

@@ -1,9 +1,7 @@
 {
     "menu": {
-        "contact": "Contact",
-        "profile": "Profil",
+        "profile": "Profile",
         "contacts list": "contacts list",
-        "messages": "Messages",
         "correspondence": "Correspondence",
         "chat": "Chat",
         "video conferencing": "Video conferencing"

src/components/message/locale/fr.json

@@ -1,9 +1,7 @@
 {
     "menu": {
-        "contact": "Contact",
         "profile ": "Profil",
         "contacts list": "Liste des contacts",
-        "messages": "Messages",
         "correspondence": "Correspondence",
         "chat": "Chat",
         "video conferencing": "Visioconférence"

src/components/message/message-routes.js

@@ -1,3 +1,2 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
-

src/components/message/message-state.js

@@ -1,3 +1,13 @@
 /* jshint -W097 */ // don't warn about "use strict"
 "use strict";
 
+import Vuex from 'vuex';
+
+const store = new Vuex.Store({
+    state: {},
+    mutations: {},
+    actions: {},
+    modules: {}
+});
+
+export default store;

src/locale/en.json

@@ -13,7 +13,9 @@
         "connection": "Connection",
         "account":"Account",
         "dashboard": "Dashboard",
-        "disconnect": "Disconnect"
+        "disconnect": "Disconnect",
+        "messages": "Messages",
+        "contact": "Contact"
     },
     "pwa": {
         "ready": "Your applications are ready for offline.",

src/locale/fr.json

@@ -13,7 +13,9 @@
         "connection": "Connexion",
         "account":"Compte",
         "dashboard": "Tableau de bord",
-        "disconnect": "Déconnexion"
+        "disconnect": "Déconnexion",
+        "contact": "Contact",
+        "messages": "Messages"
     },
     "pwa": {
         "ready": "Vous êtes prêts pour le mode hors-ligne.",

src/nervtn-routes.js

@@ -5,9 +5,12 @@ import * as VueRouter from 'vue-router';
 
 const Apps = () => import('./components/NervTNApps.vue');
 const Dashboard = () => import('./components/Dashboard.vue');
-const Chat = () => import('./components/message/Message.vue');
+const NavMessage = () => import('./components/message/NavMessage.vue');
+const Chat = () => import('./components/message/Chat.vue');
 const Correspondance = () => import('./components/message/Correspondance.vue');
-const Profil = () =>import('./components/contact/Profile.vue');
+const NavContact = () => import('./components/message/NavContact.vue');
+const Profile = () => import('./components/contact/Profile.vue');
+const ContactsList = () => import('./components/contact/ContactsList.vue');
 
 
 const routes = [
@@ -32,7 +35,17 @@ const routes = [
         }
     },
     {
-        path: '/chat',
+        path: '/navMessage',
+        name: "NavMessage",
+        components: {
+            default: NavMessage,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navMessage/chat',
         name: "Chat",
         components: {
             default: Chat,
@@ -42,7 +55,7 @@ const routes = [
         }
     },
     {
-        path: '/correspondance',
+        path: '/navMessage/correspondance',
         name: "Correspondance",
         components: {
             default: Correspondance,
@@ -52,10 +65,30 @@ const routes = [
         }
     },
     {
-        path: '/profil',
-        name: "Profil",
+        path: '/navContact',
+        name: "NavContact",
         components: {
-            default: Profil,
+            default: NavContact,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navContact/profile',
+        name: "Profile",
+        components: {
+            default: Profile,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/navContact/contactsList',
+        name: "ContactsList",
+        components: {
+            default: ContactsList,
             //Links: {},
             //Sidebar: {},
             //ActionBar: {}