Menu.vue

<template>
  <div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''">
    <DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/>
    <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante"></Choix_Mode_Variante>
    <span id="prout">{{ titrePage }}</span>
    <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
         v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
    <div class="circle" id="menuAuteur" v-on:click="isAffiche = !isAffiche"  v-bind:style="styleCircle">

    </div>
    <div class="menu" v-bind:class="darkMode ? 'menuDark' : ''"   v-show="isAffiche">
      <div v-if="etat !== 'Profil'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''"  v-on:click="choixMenuAnnexe">Profil</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div v-if="etat !== 'Mises à jour'"  v-bind:class="darkMode ? 'sous_menuDark' : ''" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>

      <div v-if="etat !== 'Tags'"  class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div v-if="etat !== 'Evaluations'"  class="sous_menu"   v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Deconnexion</div>
    </div>
  </div>
</template>

<script>
//[!isNotif ? {'margin-left': '94.75%'} : {'margin-left': '3%'}
import Choix_Mode_Variante from "./components/Choix_Mode_Variante";
import Service from "./service/Service";
import DarkModeSwitch from 'vue-dark-mode-switch'
import 'vue-dark-mode-switch/dist/vue-dark-mode-switch.css'

export default {
  name: "Menu",
  data: function () {
    return {
      isAffiche: false,
      isNotif: false,
      isRecu: false,
      isPropose: false,
      styleCircle: {},
      darkMode: false,
      titrePage: "",
      roblox: "https://www.google.com/url?sa=i&url=https%3A%2F%2Feducation.roblox.com%2F&psig=AOvVaw2WUZcaXl4Wpn3dLXhgO41R&ust=1626436473301000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCIjmoJWC5fECFQAAAAAdAAAAABAD"
    }
  },
  props: {
    // Permet de déterminer si on est dans le mode mise à jour ou pas
    etat: {},
    // Booléen pour savoir si la variante du menu Banque/Panier est active ou pas
    variante: {},
    // Auteur connecté
    auteur: {},
    // Booléen permettant le recalcul des notifications
    recalculerNotif: {}
  },
  methods: {
    /**
     * @vuese
     * Gestion du clic sur un des éléments du menu 'auteur' (en haut à droite)
     */
    choixMenuAnnexe: function (e) {
      const menuClique = e.target.innerText
      if (menuClique !== 'Contenu'){
        this.titrePage = menuClique
      } else {
        this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
      }
      this.$emit("menu_choisi", {choix: menuClique})
      this.isAffiche = false
    },
    /**
     * @vuese
     * Gestion du clic sur le menu des évaluations. Sera, a terme, intégré dans choisMenuAnnexe.
     */
    evaluations: function () {
      alert("Gestion des évaluations (a venir)")
    },
    /**
     * @vuese
     * Gestion du clic sur l'icone de notification
     */
    choixIconeNotification: function () {
      this.$emit("menu_choisi", {choix: "Mises à jour", isRecu: this.isRecu, isPropose: this.isPropose})
      this.isAffiche = false
    },
    /**
     * @vuese
     * Fonction de calcul de présence de notification dans le cadre des mises à jour recues (de contenu perso ou de contenu tiers)
     */
    publicationsRecues: function () {
      let that = this
      Service.getPublicationsRecues(this.auteur).then(function (response) {
        let contenusRecu = response.data



        for (let i = 0; i < contenusRecu.length; i++) {


          if (contenusRecu[i].etat === "enCours") {
            that.isNotif = contenusRecu.length !== 0
            that.isRecu = that.isNotif
          }
        }
        that.majTiers()
        that.changerStyle()
      })
    },
    /**
     * @vuese
     * Fonction de calcul de présence de notification dans le cadre des mises à jour proposées (dont l'état n'est plus en cours)
     */
    publicationsProposees: function () {
      let that = this
      Service.getPublicationsProposees(this.auteur).then(function (response) {
        let contenusPropose = response.data


        for (let i = 0; i < contenusPropose.length; i++) {

          if (contenusPropose[i].etat !== "enCours") {
            that.isNotif = true
            that.isPropose = that.isNotif
          }
        }
        that.changerStyle()

      })
    },
    /**
     * @vuese
     * (A construire) Fonction de calcul du nombre de maj tiers disponibles
     */
    majTiers: function () {
      let that = this
      Service.isMajTiersDisponible(this.auteur).then(function (response) {

        if (response.data === "True") {
          that.isNotif = true
          that.isRecu = that.isNotif
        }
        that.changerStyle()

      })
    },
    /**
     * @vuese
     * Fonction qui petmet d'affecter les bonnes marges pour le menu d'en haut à droite
     */
    changerStyle: function () {


      if (this.isNotif){
        this.styleCircle["margin-left"] = "3%"
      }
      else if (this.variante){
        this.styleCircle["margin-left"] = "38.87%"
      }
      else {
        this.styleCircle["margin-left"] = "94.75%"

      }
    },
    onSwitched: function (isSwitched) {
      this.darkMode = isSwitched
      this.$emit("darkTheme", {active: isSwitched})
    }
  },
  components: {
    Choix_Mode_Variante,
    DarkModeSwitch
  },
  watch: {
    /**
     * @vuese
     * Dès que l'auteur est trasmis à cette page, on calcule ses opportunités de maj et on configure la notification en fonction
     */
    auteur: function () {
      this.isNotif = false
      this.publicationsRecues()
      this.publicationsProposees()

      this.changerStyle()
      this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
    },
    /**
     * @vuese
     * Recalcul des opportunités de maj et on configure la notification en fonction après action dans le menu maj (fonctionne actuellement pas)
     */
    recalculerNotif: function () {
      this.isNotif = false
      this.publicationsRecues()
      this.changerStyle()
    },
    variante: function () {
      this.changerStyle()
    }
  }
}
</script>

<style scoped>

#menuHaut{
  display: flex;
  background-color: white;
  justify-content: center;
}
.circle {
  border: 1px solid yellow;
  margin-top: 0.25%;
  margin-bottom: 0.25%;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center;
  justify-content: center;
  height: 37.5px;
  width: 37.5px;

  background: gold url(assets/img/person2.png);
  background-size: cover;

}

.menuVariante{
  margin-top: 1%;
  z-index: 1;

}

.menu{
  height: 200px;
  width: 100px;
  background: white;
  border: thin solid black;
  margin-top: 46px;
  margin-left: 94.75%;
  position: fixed;
  display: flex;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;

  z-index: 5;
}

.notif {
  border: thin solid black;
  border-radius: 30%;
  height: 30px;
  width: 30px;
  margin-top: 1.5%;
  z-index: 1;
  margin-left: 90%;
  background-image: url(assets/img/cloche.png);
  background-size: cover;

}

.sous_menu{
  flex-basis: 20%;
  border: thin solid black;
  line-height: 36px;
  z-index: 1;

}

#prout {

  display: flex;
  position: absolute;
  margin-top: 0.5%;
  margin-bottom: 0.1%;
}

.dark, .menuDark, .sous_menuDark {
  background-color: #111 !important;
  color: #eee;
  border-color: white !important;
}
</style>