Ajout de la variante du menu

src/App.vue → src/Contenu.vue

 <template>
   <div id="app">
-    <Volet_Base/>
+    <Volet_Base @choix_variante="choixVariante"/>
   </div>
 </template>
 
 <script>
 
 import Volet_Base from "@/components/Volet_Base";
-
 export default {
-  name: 'App',
+  name: 'Contenu',
   components: {
     Volet_Base
   },
+  methods: {
+    choixVariante: function (event) {
+
+        this.$emit("choix_variante", {variante: event.variante})
+
+    }
+  }
 }
 </script>
 

src/Index.vue

 <template>
-<div>
-  <Login v-show="!userLogged" @user_logged="setLogged"></Login>
+  <div>
+    <Login v-show="etat === 'unlogged'" @user_logged="setLogged"></Login>
 
-  <App v-show="userLogged"  ></App>
+    <Menu v-show="etat !== 'unlogged'" v-bind:etat="etat"  v-bind:variante="variante" @menu_choisi="changerPage"></Menu>
+    <Contenu v-show="etat === 'Contenu'"  @choix_variante="choixVariante"></Contenu>
+    <Maj v-show="etat === 'Mises à jour'"  ></Maj>
+    <Profil v-show="etat === 'Profil'"  ></Profil>
+    <Tags v-show="etat === 'Tags'"  ></Tags>
 
-</div>
+
+  </div>
 </template>
 
 <script>
 import Login from "@/Login";
-import App from "@/App";
+import Contenu from "@/Contenu";
+import Menu from "@/Menu";
+import Maj from "@/Maj";
+import Profil from "@/Profil";
+import Tags from "@/Tags";
 
 export default {
   name: "Index.vue",
   data: function () {
     return {
-      userLogged: false
+      etat: "unlogged",
+      variante: false
     }
   },
   methods: {
     setLogged: function () {
       //this.$cookies.set("isLogged", true)
-      this.userLogged = true
+      this.etat = "Contenu"
+    },
+    changerPage: function (event) {
+      if (event.choix === "Deconnexion")
+        this.etat = "unlogged"
+      else
+        this.etat = event.choix
+    },
+    choixVariante: function (event) {
+      this.variante = event.variante
+
     }
   },
-  created() {
-    //this.userLogged = this.$cookies.get("isLogged")
-  },
   components:{
     Login,
-    App
+    Contenu,
+    Menu,
+    Maj,
+    Profil,
+    Tags
   }
 }
 </script>

src/Login.vue

 <template>
-  <div>
-    <form>
+  <div id="loginForm">
 
       <label for="identifiant">Identifiant</label>
       <br>
-      <input type="text" id="identifiant" placeholder="identifiant"  v-model="login"  required="required">
+      <input type="text" id="identifiant" placeholder="identifiant"  v-model="login"  >
       <br>
       <br>
 
       <label for="motdepasse">Mot de Passe</label>
       <br>
-      <input type="password" id="motdepasse" placeholder="mot de passe" v-model="password" required="required">
+      <input type="password" id="motdepasse" placeholder="mot de passe" v-model="password">
       <br>
       <br>
 
-      <button value="connexion" @click.prevent="logIn"/>
+    <button @click.prevent="logIn">Connexion</button>
 
-    </form>
   </div>
 </template>
 
@@ -42,16 +40,23 @@ export default {
 </script>
 
 <style scoped>
-form {
+#loginForm {
   width : 1000px;
   text-align: center;
   align-content: center;
   margin: 20% auto 0;
 }
 
-input.text, input.password{
+input{
   width: 350px;
   text-align: center;
 }
 
+button {
+  height: 20px;
+  width: auto;
+  text-align: center;
+}
+
+
 </style>
\ No newline at end of file

src/Maj.vue

+<template>
+  <div>
+    Maj
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Maj"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/Menu.vue

+<template>
+  <div id="menuHaut">
+
+    <Choix_Mode_Variante class="menuVariante" v-show="variante"></Choix_Mode_Variante>
+
+    <div class="circle" v-on:click="isAffiche = !isAffiche" v-bind:style="[!variante ? {'margin-left': '95%'} : {'margin-left': '36.75%'}]">
+      Auteur 1
+    </div>
+    <div class="menu" v-show="isAffiche">
+      <div class="sous_menu" v-on:click="choixMenuAnnexe">Profil</div>
+      <div v-if="etat !== 'Mises à jour'" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
+      <div v-else class="sous_menu" v-on:click="choixMenuAnnexe">Contenu</div>
+      <div class="sous_menu" v-on:click="choixMenuAnnexe">Tags</div>
+      <div class="sous_menu" v-on:click="choixMenuAnnexe">Deconnexion</div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import Choix_Mode_Variante from "@/components/Choix_Mode_Variante";
+export default {
+  name: "Menu",
+  data: function () {
+    return {
+      isAffiche: false,
+    }
+  },
+  props: ['etat', 'variante'],
+  methods: {
+    choixMenuAnnexe: function (e) {
+      this.$emit("menu_choisi", {choix: e.target.innerText})
+    }
+  },
+  components:{
+    Choix_Mode_Variante
+  }
+
+}
+</script>
+
+<style scoped>
+
+#menuHaut{
+  display: flex;
+}
+  .circle {
+    background: gold;
+    border: 1px solid yellow;
+    margin-top: 1%;
+    border-radius: 50%;
+    display: flex; /* or inline-flex */
+    align-items: center;
+    justify-content: center;
+    height: 75px;
+    width: 75px;
+  }
+
+  .menuVariante{
+    margin-top: 1%;
+    margin-left: 45%;
+    z-index: 1;
+
+  }
+
+  .menu{
+    height: 150px;
+    width: 100px;
+    background: white;
+    border: thin solid black;
+    margin-top: 1px;
+    margin-left: 93.5%;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    vertical-align: middle;
+
+    z-index: 1;
+  }
+
+  .sous_menu{
+    flex-basis: 25%;
+    border: thin solid black;
+    line-height: 36px;
+
+  }
+</style>
\ No newline at end of file

src/Profil.vue

+<template>
+  <div>
+    Profil
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Profil"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/Tags.vue

+<template>
+<div>
+  Tags
+</div>
+</template>
+
+<script>
+export default {
+  name: "Tags"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Choix_Mode_Variante.vue

+<template>
+<div>
+
+  <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
+    <div id = "contenusPanier" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
+      <p>Panier</p>
+    </div>
+
+    <div id = "contenusBanque" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
+      <p>Banque</p>
+    </div>
+
+  </div>
+
+</div>
+</template>
+
+<script>
+export default {
+  name: "Choix_Mode_Variante",
+  data: function () {
+    return {
+      contenuPanier: true,
+    }
+  },
+  methods: {
+    changerChoix: function () {
+      this.contenuPanier = !this.contenuPanier
+      this.$emit("mode_choisi", {mode: this.contenuPanier})
+    },
+  }
+}
+</script>
+
+<style scoped>
+#choixDuMode {
+  border: 1px solid black;
+  width: 250px;
+  display: flex;
+}
+
+#contenusPanier, #contenusBanque {
+
+  width: 125px;
+  text-align: center;
+}
+
+.nonClicked {
+  outline: 1px solid black;
+}
+
+.clicked {
+  outline: 5px solid yellow;
+}
+</style>
\ No newline at end of file

src/components/Volet_Base.vue

 <template>
+
+<div>
+  <button id="changerVariante" v-on:click="changerVariante">changer</button>
+
   <div id="ensemble">
     <button id="boutonVolet" v-on:click="desactiverVolet"></button>
     <div class="full" id="volet" v-show="isActif">
       <Volet_Menu v-bind:mode-choisi = "modeChoisi" @filtre_choisi="passerFiltre"/>
-      <Volet_Choix @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi"/>
+      <Volet_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"/>
     </div>
   </div>
+</div>
 </template>
 
 <script>
 import $ from 'jquery'
 import 'jquery-ui-bundle'
 import Volet_Menu from "@/components/Volet_Menu";
-import Volet_Choix from "@/components/Volet_Contenu";
+import Volet_Contenu from "@/components/Volet_Contenu";
 
 export default {
   name: "Volet_Base",
   components: {
     Volet_Menu,
-    Volet_Choix
+    Volet_Contenu
   },
   data: function () {
     return {
       isActif: true,
       modeChoisi: "Panier",
-      filtre_choisi: ""
+      filtre_choisi: "",
+      variante: false
     }
   },
   mounted() {
@@ -44,6 +50,13 @@ export default {
     },
     passerFiltre: function(event){
       this.filtre_choisi = event.filtre
+    },
+    changerVariante: function (){
+      this.variante = ! this.variante
+
+        this.$emit("choix_variante", {variante: this.variante})
+
+
     }
   }
 }
@@ -61,9 +74,13 @@ export default {
 }
 
 #boutonVolet {
-  margin-top: 130px;
+  margin-top: 75px;
   margin-left: 10px;
 }
 
+#changerVariante {
+  width: auto;
+}
+
 
 </style>
\ No newline at end of file

src/components/Volet_Contenu.vue

 <template>
   <div id="contenu">
+
     <div id = "detailFiltre">
 
       <Detail_Filtre v-bind:nouveau_filtre="nouveau_filtre" />
     </div>
     <div id = "detailContenu">
-      <Detail_Contenu v-bind:filtre_choisi="filtre_choisi"  @creer_filtre="creer_filtre"/>
+      <Detail_Contenu v-bind:filtre_choisi="filtre_choisi"   @creer_filtre="creer_filtre"/>
     </div>
-    <Choix_Mode  @mode_choisi="ajusterMode" />
+    <Choix_Mode v-show="!variante"  @mode_choisi="ajusterMode" />
+
   </div>
+
 </template>
 
 <script>
@@ -16,13 +19,13 @@ import Choix_Mode from "@/components/Choix_Mode";
 import Detail_Filtre from "@/components/Detail_Filtre";
 import Detail_Contenu from "@/components/Detail_Contenu";
 export default {
-  name: "Volet_Choix",
+  name: "Volet_Contenu",
   components: {
     Choix_Mode,
     Detail_Filtre,
-    Detail_Contenu
+    Detail_Contenu,
   },
-  props: ['filtre_choisi'],
+  props: ['filtre_choisi', 'variante'],
   methods: {
     ajusterMode: function (event) {