AjoutMenu
This commit is contained in:
parent
b0c746322f
commit
ecf8e5fcf2
GPG key ID:
0F0ED996BFD1E3D9
8 changed files with 317 additions and 126 deletions
|
|
@ -1,12 +1,18 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import ReloadPWA from './components/ReloadPWA.vue';
|
import ReloadPWA from './components/ReloadPWA.vue';
|
||||||
import {useI18n} from 'vue-i18n';
|
import {useI18n} from 'vue-i18n';
|
||||||
|
import NavMessage from './components/message/NavMessage.vue';
|
||||||
|
|
||||||
const {t} = useI18n({useScope: 'local'});
|
const {t} = useI18n({useScope: 'local'});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
components: {NavMessage}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="appflex">
|
<div id="appflex">
|
||||||
<div id="page">
|
<div id="page">
|
||||||
|
|
@ -20,6 +26,11 @@ const {t} = useI18n({useScope: 'local'});
|
||||||
</div>
|
</div>
|
||||||
<div id="sidebar" class="sidebar">
|
<div id="sidebar" class="sidebar">
|
||||||
<router-view name="Sidebar"></router-view>
|
<router-view name="Sidebar"></router-view>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<NavMessage/>
|
||||||
|
<router-view name="navMessage"></router-view>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<header class="navbar">
|
<header class="navbar">
|
||||||
|
|
@ -28,16 +39,18 @@ const {t} = useI18n({useScope: 'local'});
|
||||||
<span id="site-name">{{ t('home.apps') }}</span>
|
<span id="site-name">{{ t('home.apps') }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<div class="dropdown">
|
<div class="nav-menu">
|
||||||
<button class="dropdown-toggle" v-on:click="isShowDrop = !isShowDrop">
|
<details>
|
||||||
👥 Connexion ▾
|
<summary>
|
||||||
</button>
|
<span class="connect">👥 Connexion</span>
|
||||||
<ul class="dropdown-menu" v-show="isShowDrop">
|
</summary>
|
||||||
<li><a href="#">Compte</a></li>
|
<ul>
|
||||||
<li><a href="#">Tableau de bord</a></li>
|
<li class="nav-connect"><a href="#">Compte</a></li>
|
||||||
<li><a href="#">Déconnexion</a></li>
|
<li class="nav-connect"><a href="#">Tableau de bord</a></li>
|
||||||
</ul>
|
<li class="nav-connect"><a href="#">Déconnexion</a></li>
|
||||||
</div>
|
</ul>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<router-view name="Links"></router-view>
|
<router-view name="Links"></router-view>
|
||||||
|
|
@ -47,7 +60,7 @@ const {t} = useI18n({useScope: 'local'});
|
||||||
<option value="fr">Français</option>
|
<option value="fr">Français</option>
|
||||||
<option value="nl">Nederlands</option>
|
<option value="nl">Nederlands</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,33 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu{
|
||||||
|
margin-left: auto;
|
||||||
|
padding-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.connect {
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-connect {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
a, a:visited {
|
a, a:visited {
|
||||||
|
|
|
||||||
174
src/components/contact/Contact.vue
Normal file
174
src/components/contact/Contact.vue
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="vCard">
|
||||||
|
<vue-tabs>
|
||||||
|
<v-tab title="👤 Contact">
|
||||||
|
<h1>👤 Contact</h1>
|
||||||
|
<div>
|
||||||
|
<label for="avatar">Avatar</label>
|
||||||
|
<input type="file" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="nickname">Pseudonyme :</label>
|
||||||
|
<input type="text" v-model="home">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="emailHome">Email Personnelle :</label>
|
||||||
|
<input type="email" v-model="home" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button @click="persist">Enregistrer</button>
|
||||||
|
|
||||||
|
</v-tab>
|
||||||
|
<br>
|
||||||
|
<v-tab title="📇 Informations personnelles">
|
||||||
|
<h1>📇 Informations personnelles</h1>
|
||||||
|
<div>
|
||||||
|
<label for="name">Nom complet :</label>
|
||||||
|
<input type="text" v-model="home" pattern="{a-zA-Z}{4,25}" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="bday"> Date de naissance :</label>
|
||||||
|
<input type="date" v-model="home">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="nbrHome">Numéro de téléphone :</label>
|
||||||
|
<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
|
||||||
|
v-model="home">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Home">
|
||||||
|
<h3>Adresse Personnelle</h3>
|
||||||
|
<ul>
|
||||||
|
<li><label for="street">Rue :</label></li>
|
||||||
|
<input type="text" v-model="home">
|
||||||
|
|
||||||
|
<li><label for="locality">Ville :</label></li>
|
||||||
|
<input type="text" v-model="home">
|
||||||
|
|
||||||
|
<li><label for="pcode">Code Postal :</label></li>
|
||||||
|
<input type="text" v-model="home">
|
||||||
|
|
||||||
|
<li><label for="ctry">Pays :</label></li>
|
||||||
|
<input type="text" v-model="home">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button @click="persist">Enregistrer</button>
|
||||||
|
</div>
|
||||||
|
</v-tab>
|
||||||
|
<br>
|
||||||
|
<v-tab title="💼 Emploi">
|
||||||
|
<h1>💼 Emploi</h1>
|
||||||
|
<div>
|
||||||
|
<label for="orgname">Entreprise :</label>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="title">Poste :</label>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="role">Rôle :</label>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="emailWork">Email Professionnel :</label>
|
||||||
|
<input type="email" v-model="work">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="nbrWork">Numéro de téléphone :</label>
|
||||||
|
<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
|
||||||
|
v-model="work">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Work">
|
||||||
|
<h3>Adresse Proffessionelle</h3>
|
||||||
|
<ul>
|
||||||
|
<li><label for="street">Rue :</label></li>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
|
||||||
|
<li><label for="locality">Ville :</label></li>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
|
||||||
|
<li><label for="pcode">Code Postal :</label></li>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
|
||||||
|
<li><label for="ctry">Pays :</label></li>
|
||||||
|
<input type="text" v-model="work">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button @click="persist">Enregistrer</button>
|
||||||
|
</div>
|
||||||
|
</v-tab>
|
||||||
|
<br>
|
||||||
|
<v-tab title="✍🏼 Commentaires">
|
||||||
|
<h1>✍🏼 Commentaires</h1>
|
||||||
|
<div>
|
||||||
|
<label for="comment"></label>
|
||||||
|
<textarea v-model="home"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button @click="persist">Enregistrer</button>
|
||||||
|
|
||||||
|
</v-tab>
|
||||||
|
</vue-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* export default {
|
||||||
|
name: 'vCard',
|
||||||
|
setup() {
|
||||||
|
home = "",
|
||||||
|
work = ""
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (localStorage.home) {
|
||||||
|
this.home = localStorage.home;
|
||||||
|
}
|
||||||
|
if (localStorage.work) {
|
||||||
|
this.work = localStorage.work;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
persist() {
|
||||||
|
localStorage.home = this.home;
|
||||||
|
localStorage.work = this.work;
|
||||||
|
console.log('ok');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el:"#vCard",
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
label{
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
<template>
|
|
||||||
<form id="vCard">
|
|
||||||
<!-- Informations Personnelles -->
|
|
||||||
<p>
|
|
||||||
<label for="avatar">Avatar</label>
|
|
||||||
<input type="file" />
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="name">Nom complet</label>
|
|
||||||
<input type="text" v-model="home" required>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="nickname">Pseudonyme</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="bday">Date de naissance</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="emailHome">Email Perso</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="nbrHome">Numéro de téléphone</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="Home">
|
|
||||||
<h3>Adresse</h3>
|
|
||||||
<label for="street">Rue</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
|
|
||||||
<label for="locality">Ville</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
|
|
||||||
<label for="pcode">Code Postal</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
|
|
||||||
<label for="ctry">Pays</label>
|
|
||||||
<input type="text" v-model="home">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Emploi -->
|
|
||||||
<p>
|
|
||||||
<label for="orgname">Entreprise</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="title">Poste</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="role">Rôle</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="emailWork">Email Professionnel</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="nbrWork">Numéro de téléphone</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="Work">
|
|
||||||
<h3>Adresse</h3>
|
|
||||||
<label for="street">Rue</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
|
|
||||||
<label for="locality">Ville</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
|
|
||||||
<label for="pcode">Code Postal</label>
|
|
||||||
<input type="number" v-model="work">
|
|
||||||
|
|
||||||
<label for="ctry">Pays</label>
|
|
||||||
<input type="text" v-model="work">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<button @click="persist">Enregistrer</button>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'vCard',
|
|
||||||
setup() {
|
|
||||||
home = "",
|
|
||||||
work = ""
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (localStorage.home) {
|
|
||||||
this.home = localStorage.home;
|
|
||||||
}
|
|
||||||
if (localStorage.work) {
|
|
||||||
this.work = localStorage.work;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
persist() {
|
|
||||||
localStorage.home = this.home;
|
|
||||||
localStorage.work = this.work;
|
|
||||||
console.log('ok');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
11
src/components/message/Chat.vue
Normal file
11
src/components/message/Chat.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>Chat</h1>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
12
src/components/message/Correspondance.vue
Normal file
12
src/components/message/Correspondance.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>Correspondance</h1>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
33
src/components/message/NavMessage.vue
Normal file
33
src/components/message/NavMessage.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<span class="onglet">💬 ✉️ Messages</span>
|
||||||
|
</summary>
|
||||||
|
<ul>
|
||||||
|
<li><router-link to="/correspondance">📭 Correspondance</router-link></li>
|
||||||
|
<li><router-link to="/chat">💬 Chat</router-link></li>
|
||||||
|
<li><router-link to="">🎥 Visioconférence</router-link></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<router-link to="/contact">👤 Contact</router-link>
|
||||||
|
</summary>
|
||||||
|
<ul>
|
||||||
|
<li><router-link to=""></router-link></li>
|
||||||
|
<li><router-link to=""></router-link></li>
|
||||||
|
<li><router-link to=""></router-link></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -5,6 +5,10 @@ import * as VueRouter from 'vue-router';
|
||||||
|
|
||||||
const Apps = () => import('./components/NervTNApps.vue');
|
const Apps = () => import('./components/NervTNApps.vue');
|
||||||
const Dashboard = () => import('./components/Dashboard.vue');
|
const Dashboard = () => import('./components/Dashboard.vue');
|
||||||
|
const Chat = () => import('./components/message/Chat.vue');
|
||||||
|
const Correspondance = () => import('./components/message/Correspondance.vue');
|
||||||
|
const Contact = () =>import('./components/contact/Contact.vue');
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -27,6 +31,36 @@ const routes = [
|
||||||
//ActionBar: {}
|
//ActionBar: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/chat',
|
||||||
|
name: "Chat",
|
||||||
|
components: {
|
||||||
|
default: Chat,
|
||||||
|
//Links: {},
|
||||||
|
//Sidebar: {},
|
||||||
|
//ActionBar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/correspondance',
|
||||||
|
name: "Correspondance",
|
||||||
|
components: {
|
||||||
|
default: Correspondance,
|
||||||
|
//Links: {},
|
||||||
|
//Sidebar: {},
|
||||||
|
//ActionBar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contact',
|
||||||
|
name: "Contact",
|
||||||
|
components: {
|
||||||
|
default: Contact,
|
||||||
|
//Links: {},
|
||||||
|
//Sidebar: {},
|
||||||
|
//ActionBar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/:errorPath(.*)*',
|
path: '/:errorPath(.*)*',
|
||||||
name: "NotFound",
|
name: "NotFound",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue