Manuel.vue

<template>
  <div :style="darktheme ? {'color' : 'white'} : {'color' : 'black'} "  style="text-align: center">
    <h1 id="titreManuel">Bienvenue sur le manuel d'utilisation de l'application OpenQuizz</h1>
    <div style="display: flex">
      <div id="menuLateral">

        <ul>
          <li><h5><span class="symboleSectionInamovible"></span><a href="#titreZero"> OpenQuizz - Généralités</a></h5></li>
          <li><h5><span class="symboleSectionInamovible"></span><a href="#titreUn"> I - La connexion</a></h5></li>
          <li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreDeux"> II - L'application</a></h5></li>

          <ul class="cache">
            <li class="sousSection"><a href="#titreDeuxUn">Présentation Générale de l'interface</a></li>
            <li class="sousSection"><a href="#titreDeuxDeux">Le mode Sombre</a></li>
            <li class="sousSection"><a href="#titreDeuxTrois">Le menu Panier/Banque</a></li>
            <li class="sousSection"><a href="#titreDeuxQuatre">Affichage du volet latéral</a></li>
            <li class="sousSection"><a href="#titreDeuxCinq">Le volet latéral</a></li>
            <li class="sousSection"><a href="#titreDeuxSix">Le tableau des contenus</a></li>
            <li class="sousSection"><a href="#titreDeuxSept">Le menu des options</a></li>
            <li class="sousSection"><a href="#titreDeuxHuit">L'ajout de contenu dans le panier</a></li>

          </ul>
          <li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreTrois"> III - La gestion des contenus</a></h5></li>
          <ul class="cache">
            <li class="sousSection"><a href="#titreTroisUn">L'ajout / L'import de contenu (dans le panier)</a></li>
            <li class="sousSection"><a href="#titreTroisDeux">L'appropriation d'un contenu (via la banque)</a></li>
            <li class="sousSection"><a href="#titreTroisTrois">La consultation d'un contenu</a></li>
            <li class="sousSection"><a href="#titreTroisQuatre">La modification d'un contenu</a></li>
            <li class="sousSection"><a href="#titreTroisCinq">La mise à jour d'un contenu</a></li>
            <li class="sousSection"><a href="#titreTroisSix">La suppression d'un contenu</a></li>


          </ul>
          <li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreQuatre"> IV - Le filtrage des contenus</a></h5></li>

          <ul class="cache">
            <li class="sousSection"><a href="#titreQuatreUn">Filtre 'tags officiels'</a></li>
            <li class="sousSection"><a href="#titreQuatreDeux">Filtre 'tags libres'</a></li>
            <li class="sousSection"><a href="#titreQuatreTrois">Filtre 'auteur'</a></li>
            <li class="sousSection"><a href="#titreQuatreQuatre">Fitre 'type/source'</a></li>
            <li class="sousSection"><a href="#titreQuatreCinq">Fitlre 'date'</a></li>
            <li class="sousSection"><a href="#titreQuatreSix">Filtre 'note'</a></li>
            <li class="sousSection"><a href="#titreQuatreSept">La recherche</a></li>



          </ul>

          <li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreCinq"> V - Les autres options</a></h5></li>
          <ul class="cache">
            <li class="sousSection"><a href="#titreCinqUn">Profil</a></li>
            <li class="sousSection"><a href="#titreCinqDeux">Mises à jour</a></li>
            <li class="sousSection"><a href="#titreCinqTrois">Tags</a></li>
            <li class="sousSection"><a href="#titreCinqQuatre">Evaluations</a></li>
            <li class="sousSection"><a href="#titreCinqCinq">Deconnexion</a></li>

          </ul>
        </ul>

      </div>
      <div id="sectionPrincipale">
        <br id="titreZero">
        <h2 >OpenQuizz - Généralités</h2>
        <br>

        <p style="text-align: left;  text-indent: 3vh;"> Le site OpenQuizz est une application permettant une gestion élargie de contenus pédagogiques</p>
        <p style="text-align: left;  text-indent: 3vh;"> Ce manuel d'utilisation a vocation à détailler toutes les actions possibles sur l'application OpenQuizz</p>

        <br id="titreUn">
        <h2>I - La connexion</h2>
        <br>

        <p style="text-align: left;  text-indent: 3vh;"> Pour vous connecter sur le site, il vous suffit de vous rendre sur l'adresse {adresse} et de renseigner
          votre identifiant et votre mot de passe dans les zones prévues à cet effet, puis de cliquer sur 'Connexion'. En cas d'échec, un message d'erreur apparaitra.
          et vous pourrez alors corriger votre saisie pour accéder à l'application OpenQuizz</p>
        <p style="text-align: left;  text-indent: 3vh;"> Dans un futur proche cette page permettra également de s'inscrire à OpenQuizz.</p>
        <br>
        <img src="../src/assets/imgManuel/connexion.png"/>
        <br>

        <!-- Partie 2 - L'ihm -->

        <br id="titreDeux">
        <h2>II - L'application</h2>
        <br>

        <p style="text-align: left;  text-indent: 3vh;"> Dans cette partie il sera détaillé toutes les actions possibles avec l'application OpenQuizz. Elle n'est
          accesible que via une connexion réussie (cf <a href="#titreUn">partie précédente</a>)</p>
        <br id="titreDeuxUn">
        <br>

        <h3 >Présentation Générale de l'interface</h3>
        <br>

        <img src="../src/assets/imgManuel/accueil_1.png"/>
        <p>Légende :</p>
        <p> (Tous ces points seront développés dans les parties ci dessous)</p>
        <br>
        <p> ① Interrupteur permettant d'activer / de désactiver le mode sombre</p>
        <p> ② Interrupteur permettant de changer de place le menu de choix panier/banque</p>
        <p> ③ Interrupteur permettant de masquer / d'afficher le volet latéral</p>
        <p> ④ Volet Latéral. Gestion des filtres de recherche et bascule panier / banque</p>
        <p> ⑤ Tableau des contenus. Il recense le panier, et est variable en fonction des filtres choisis</p>
        <p> ⑥ Menu d'options. Il permet d'accéder aux autres fonctionnalités du site</p>
        <p> ⑦ Bouton d'ajout de contenu. Présent également en 'mode panier'</p>

        <br id="titreDeuxDeux">
        <br>

        <h3 >① Le mode Sombre</h3>
        <br>
        <p>Pour votre confort visuel, vous pouvez décider de passer l'affichage du site en "mode sombre", comme ceci : </p>
        <br>
        <img src="../src/assets/imgManuel/mode_sombre.png"/>

        <br id="titreDeuxTrois">
        <br>

        <h3 >② Le menu Panier/Banque</h3>
        <br>
        <p>En bas du volet latéral est présent un menu à choix permettant la bascule entre le panier et la banque. Si désiré, il est possible de faire passer ce
          menu en haut pour plus de confort visuel</p>
        <br>
        <img src="../src/assets/imgManuel/variante_menu_haut.png">

        <br id="titreDeuxQuatre">
        <br>

        <h3 >③ Affichage du volet latéral</h3>
        <br>
        <p>Le volet latéral est totalement masquable en cliquant sur le bouton ③ , ce qui permet d'avoir un confort visuel augmenté pour
          la consultation du tableau des contenus</p>
        <p> De plus, quand le volet est rétracté, les informations concernant les tags des contenus apparaissent</p>
        <br>
        <img src="../src/assets/imgManuel/volet_retracte.png">

        <br id="titreDeuxCinq">
        <br>

        <h3 >④ Le volet latéral</h3>
        <br>
        <p>Le volet latéral est utile pour deux choses. Premièrement, permettre de filtrer la liste des contenus via une série de filtres disponibles, aussi
          bien en mode panier qu'en mode banque (détail dans la <a href="#titreQuatre">partie IV</a>). Ensuite, il comprend le menu pour basculer du panier à la banque
          (sauf si <a href="#titreDeuxTrois"> la variante</a> a été cliquée)</p>
        <br>
        <img src="../src/assets/imgManuel/liste_filtres.png">


        <br id="titreDeuxSix">
        <br>

        <h3 >⑤ Le tableau des contenus</h3>
        <br>
        <p>Le tableau des contenus, que ce soit en mode panier ou en mode banque, recense tous les contenus disponibles pour l'utilisateur connecté, éventuellement
          raffinés si des filtres ont été choisis</p>
        <br>
        <p>Le tableau en 'mode banque' : </p>
        <img src="../src/assets/imgManuel/mode_banque.png">


        <br id="titreDeuxSept">
        <br>

        <h3 >⑥ Le menu des options</h3>
        <br>

        <p>Un certain nombre de fonctionnalités de l'application sont accessibles via ce menu. Cf. <a href="#titreCinq">partie V</a> pour le détail de chaque entrée du menu</p>
        <br>
        <img src="../src/assets/imgManuel/menu_options.png">

        <br id="titreDeuxHuit">
        <br>

        <h3 >⑦ L'ajout de contenu dans le panier</h3>
        <br>

        <p>L'ajout de contenu est possible via différentes voies. Quand on clique sur le ⑦ une infobulle apparait, offrant ce choix</p>
        <p>La suite du processus d'ajout est détaillée dans la <a href="#titreTroisUnxœ">partie III</a></p>

        <br>
        <img src="../src/assets/imgManuel/nouveau_contenu.png">

        <!-- Partie 3 - Les contenus -->

        <br id="titreTrois">
        <h2>III - Les contenus</h2>
        <br>
        <p>Un contenu correspond à une ressource utile pédagogiquement (par exemple: un quiz). Ces contenus sont principalement liés à des plateformes
          pédagogiques (ex: moodle, h5p)</p>
        <p>Le panier correspond à tous les contenus 'propres' d'un utilisateur : </p>
        <ul>
          <li>Ceux qu'il a créé ou importés d'une plateforme tierce</li>
          <li>Ceux d'autres auteurs qu'il s'est 'approprié'</li>
          <li>Ceux qui sont en cours de modification</li>
        </ul>
        <br id="titreTroisUn">
        <h3 >1/ L'ajout / L'import de contenu (dans le panier)</h3>
        <br>
        <h4>⓵ Le contenu markdown</h4>
        <br>
        <p>La première étape pour créer un contenu Markdown est de cliquer sur le ⊕ en bas à droite de l'écran (en mode panier), puis de choisir l'option
          1. Créer un markdown</p>
        <br>
        <p>L'utilisateur arrive ensuite sur une page dédiée à la création du contenu. Deux zones sont à remplir : </p>
        <p>En premier lieu, renseigner un titre</p>
        <p>Et ensuite le 'coeur' du contenu, en langage 'markdown', doit être saisi dans la partie gauche de la zone principale de l'écran</p>
        <p>La zone de droite sert à prévisualiser le contenu mis en forme</p>
        <br>
        <img src="../src/assets/imgManuel/markdown.png"/>
        <br>
        <br>

        <p> Après avoir validé le contenu, une page permettant de renseigner les tags fixes apparait</p>
        <p> Les tags fixes permettent de catégoriser le contenu de manière 'normalisée' pour que l'auteur et les autres utilisateurs, via la banque, puissent rapidement et
          facilement l'identifier </p>
        <p> Il est nécessaire de renseigner au moins 1 échelon de tag libre</p>
        <br>

        <img src="../src/assets/imgManuel/tags_fixes.png"/>
        <br>
        <br>

        <h4>⓶ L'import de fichier</h4>
        <br>
        <p>La première étape pour créer un contenu Markdown est de cliquer sur le ⊕ en bas à droite de l'écran (en mode panier), puis de choisir l'option
          2. Importer un xml moodle</p>
        <br>
        <img src="../src/assets/imgManuel/import_fichier.png"/>
        <br>
        <br>
        <p> Comme pour la création directe de contenu, il est nécessaire de renseigner au moins 1 échelon de tag libre</p>
        <br>

        <img src="../src/assets/imgManuel/tags_fixes.png"/>
        <br>

        <br>

        <br id="titreTroisDeux">
        <h3 >2/ L'appropriation d'un contenu (via la banque)</h3>
        <br>
        <h4>⓵ L'appropriation directe</h4>
        <br>
        <p>La dernière colonne du tableau permet, en mode banque, de sélectionner un ou plusieurs contenus. Un clic sur l'étoile en haut de la colonne transfèrera
        tous les contenus dans le panier de l'auteur (la version courante)</p>
        <img src="../src/assets/imgManuel/tiers_1.png"/>
        <br>
        <br>
        <h4>⓶ L'appropriation indirecte</h4>
        <br>
        <p>Un click sur le titre du contenu permet de consulter le détail du contenu. Un bouton en haut de page permet de 'mettre en favori' le contenu, et, si
        elles existent, de s'approprier une version antérieure du contenu dans son panier</p>
        <p>Comme pour la partie panier, un survol du titre à la souris permet de prévisualiser l'intérieur du contenu</p>
        <br>

        <img src="../src/assets/imgManuel/tiers_2.png"/>
        <br>

        <br id="titreTroisTrois">
        <h3 >3/ La consultation d'un contenu</h3>
        <br>
        <h4>⓵ La prévisualisation de l'intérieur du contenu</h4>
        <br>

        <p> Pour pouvoir avoir un premier apercu de l'intérieur d'un contenu, il faut passer la souris sur son titre, et la prévisualisation s'affichera : </p>
        <br>
        <img src="../src/assets/imgManuel/previsualisation_contenu.png"/>
        <br>
        <br>

        <h4>⓶ La page de consultation d'un contenu</h4>
        <br>
        <p> Pour accéder à cette page, il faut cliquer sur le titre d'un contenu (au niveau du tableau) : </p>
        <p> On remarque que l'ecran se divise en deux parties : une zone d'informations, avec le détail du contenu et quelques actions disponibles ; et une zone
        permettant la visualisation et la modification du contenu</p>
        <br>
        <br>

        <img src="../src/assets/imgManuel/consultation_ecran.png"/>
        <br>
        <br id="tagsAssocies">

        <h4>⓷ La gestion des tags associés</h4>
        <br>
        <p> Pour accéder à cette zone, il faut avoir accédé à la page de consultation du contenu et cliquer sur le crayon à coté de la mention 'modifier Tags'</p>
        <p> Dans cette zone, il sera possible d'associer et de dissocier des tags libres au contenu mais aussi de modifier les tags fixes (sous réserve que le contenu
        que l'utilisateur consulte soit un de ceux qu'il a créé ou importé</p>
        <br>
        <img src="../src/assets/imgManuel/tags_contenu.png"/>
        <br>
        <br>
        <h4>⓸ La notation (contenu 'tiers')</h4>
        <br>
        <p> Dans le cadre de la consultation d'un contenu tiers, il est possible de lui associer une noter personnelle, qui sert, pour les utilisateurs consultant
        ce contenu dans la banque, à en évaluer la qualité</p>
        <p> Pour ce faire, cliquer sur 'noter' et sélectionner le nombre d'étoiles désiré, pour donner une note sur 5 (les demi-étoiles sont possibles)</p>
        <p> Toute note choisie est définitive, sous réserve de ne pas supprimer le contenu tiers</p>
        <br>

        <img src="../src/assets/imgManuel/notation_contenu.png"/>
        <br>

        <br id="titreTroisQuatre">
        <h3 >4/ La modification d'un contenu</h3>
        <br>
        <p> Pour accéder à cette zone, il faut avoir accédé à la page de consultation du contenu</p>
        <p> Il est possible de modifier le titre du contenu (via la zone de texte située en haut au centre) mais aussi l'intérieur du contenu (via la zone bipartite
        du milieu de l'écran)</p>
        <p>Une fois les modifications effectuées, cliquer sur le bouton modifier en bas de la zone et un nouveau contenu 'en-cours' apparaitra dans le tableau des
          contenus du panier</p>
        <img src="../src/assets/imgManuel/consultation_ecran.png"/>


        <br id="titreTroisCinq">
        <h3 >5/ La mise à jour d'un contenu</h3>
        <br>
        <p> Pour faire évoluer un contenu de version, deux cas sont possibles : </p>
        <br>
        <p>※ Si vous voulez faire évoluer un contenu de votre création, il faut consulter le contenu en cours. Une option 'valider contenu' apparaitra à droite de
        la barre d'informations</p>

        <br>
        <img src="../src/assets/imgManuel/valider_contenu.png"/>
        <br>
        <br>

        <p>※ Si vous voulez faire évoluer un contenu 'tiers', il faudra passer par une demande de publication. Le contenu suivra alors le processus de gestion des
          demandes de mise à jour, détaillée dans la <a href="#titreCinqDeux">partie V</a>. L'option pour cette demande sera située au même
        endroit que l'option 'valider contenu' mentionnée ci dessus</p>

        <br>
        <img src="../src/assets/imgManuel/publier_contenu.png"/>
        <br>

        <br id="titreTroisSix">
        <h3 >6/ La suppression d'un contenu</h3>
        <br>
        <p> Deux façone de supprimer un contenu : </p>
        <h4>⓵ La suppression directe</h4>
        <br>
        <p> Sur un principe similaire à l'appropriation directe, il faut, en mode panier, cocher la dernière colonne des contenus pour sélectionner le ou les contenus
        à supprimer, puis cliquer sur la poubelle en haut de la colonne</p>
        <br>
        <img src="../src/assets/imgManuel/suppression_directe.png"/>
        <br>

        <h4>⓶ La suppression indirecte</h4>
        <br>
        <p> Pour se faire, il faut consulter l'intérieur du contenu. A droite de la zone de modification du titre se situe l'icone du poubelle servant à supprimer
        le contenu consulté</p>
        <br>
        <img src="../src/assets/imgManuel/consultation_ecran.png"/>
        <br>


        <!-- Partie 4 - Les filtres -->

        <br id="titreQuatre">
        <h2>IV - Le filtrage des contenus</h2>
        <br>
        <p> Que l'on soit en mode banque ou en mode panier, il peut être utile de restreindre, via des critères définis, les contenus affichés à l'écran</p>
        <p> Une zone prévue, en haut du volet latéral, permet d'afficher tous les filtres choisis. Une croix à côté de chaque filtre permet de le supprimer</p>
        <p> Voici donc les possibilités offertes par OpenQuizz : </p>
        <br>

        <br id="titreQuatreUn">
        <h3 >1/ Filtre 'tags officiels'</h3>
        <br>
        <p> Obligatoirement présents, ces filtres sont disponibles dans les modes panier et banque. Au niveau de la zone d'affichage le nom du filtre (ou 'sous-filtre')
        apparait, et un survol du filtre permet, le cas échéant, d'en découvrir le 'chemin complet' (les filtres étant organisés hiérarchiquement)</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_tags_officiels.png"/>
        <br>
        <br id="titreQuatreDeux">
        <h3 >2/ Filtre 'tags libres'</h3>
        <br>
        <br>
        <p> Contrairement aux tags officiels ces filtres, exclusifs à l'auteur connecté, ne sont disponibles que dans la banque.
          Ils servent à offrir une catégorisation personnalisée des contenus, et sont modifiables pour chaque contenu (cf. <a href="#tagsAssocies">partie III</a>)
         Etant construits sur le modèle hiararchique des tags officiels, un survol permet également d'en découvrir le chemin complet</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_tags_libres.png"/>

        <br>

        <br id="titreQuatreTrois">
        <h3 >3/ Filtre 'auteur'</h3>
        <br>
        <p> Ce filtre permet de choisir des contenus d'un ou de plusieurs auteurs</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_auteur.png"/>
        <br>

        <br id="titreQuatreQuatre">
        <h3 >4/ Fitre 'type/source'</h3>
        <br>
        <p> Ce filtre permet de choisir des contenus selon son type (quiz, ...) ou sa source (markdown, moodle, ...)</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_type_source.png"/>
        <br>


        <br id="titreQuatreCinq">
        <h3 >5/ Fitlre 'date'</h3>
        <br>
        <p> Ce filtre permet d'isoler des contenus plus ou moins récents. Une seule occurence du filtre est possible à la fois</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_date.png"/>
        <br>

        <br id="titreQuatreSix">
        <h3 >6/ Filtre 'note'</h3>
        <br>
        <p> Ce filtre permet d'isoler de choisir des contenus en prenant une note minimale, une note maximale ou une fourchette de notes.</p>
        <p> Il n'est pas possible de choisir une note minimale/maximale et une fourchette en même temps</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_note.png"/>
        <br>


        <br id="titreQuatreSept">
        <h3 >7/ La recherche</h3>
        <br>
        <p> (En cours de construction) Cliquer sur l'icone à droite de la zone de sélection des filtres fait entrer en 'mode recherche'</p>
        <p> Une zone de saisie de texte permet de choisir un terme</p>
        <br>
        <img src="../src/assets/imgManuel/filtre_recherche.png"/>
        <br>

        <!-- Partie 5 - Les options -->

        <br id="titreCinq">
        <h2>V - Les autres options</h2>
        <br>

        <br id="titreCinqUn">
        <h3 >1/ Profil</h3>
        <br>
        <p> Dans cette partie il est possible de consulter son profil, renseigné lors de l'inscription, et en particulier son ecole, sa note d'auteur (modalités à
        définir)</p>
        <p> C'est également ici qu'un utilisateur pourra modifier son mot de passe</p>

        <br id="titreCinqDeux">
        <h3 >2/ Mises à jour</h3>
        <br>
        <p>C'est la partie ou sont visibles toutes les mises à jour recues ou proposées de l'utilisateur (un menu permettant la bascule entre les deux)</p>
        <p>Une icone de notification s'affiche à coté du menu en haut à droite si une mise à jour est disponible pour l'utilisateur</p>

        <br>
        <img src="../src/assets/imgManuel/icone_notification_maj.png"/>
        <br>
        <br>


        <h4>⓵ Les maj recues</h4>
        <br>
        <p> Elles sont de deux types: les mises à jour de contenu personnel et les mises à jour de contenu tiers</p>
        <p> Pour chacun de ces types, deux actions sont disponibles : l'acceptationn et le refus</p>
        <p> La prévisualisation (via survol du titre) et la consultation (via click sur le titre) de la mise à jour sont disponibles</p>

        <br>
        <img src="../src/assets/imgManuel/maj_recues.png"/>
        <br>
        <br>

        <h4>⓶ Les maj proposées</h4>
        <p> Les mises à jour proposées, suite au click sur 'Publier le contenu', peuvent être dans 3 états différents : </p>
        <p> -EnCours. Dès qu'une demande de publication, et dans l'attente d'une action de l'auteur original du contenu. Aucune action possible</p>
        <p> -Acceptée. Le contenu a été mis à jour. Le bouton supprimer, pour faire disparaitre la ligne, apparait </p>
        <p> -Refusée. L'auteur de base du contenu ne désire pas le mettre à jour. Trois actions sont alors disponibles :
        <p style="text-indent: 2vh">-Conserver le contenu. Il sera marqué comme un contenu en cours mais ne pourra plus faire l'objet de demande de publication</p>
        <p style="text-indent: 2vh">-Creer un nouveau contenu. Permet de convertir le contenu en cours à l'origine de la demande de publication en contenu personnel</p>
        <p style="text-indent: 2vh">-Supprimer le contenu. Efface la demande de publication et le contenu associé</p>

        <br>
        <img src="../src/assets/imgManuel/maj_proposees.png"/>
        <br>
        <br>


        <br id="titreCinqTrois">
        <h3 >3/ Tags</h3>
        <br>
        <p> Dans cette zone il est possible de gérer toute l'arborescence des tags libres de l'utilisateur connecté: ajouter ou supprimer un tag libre, qu'il soit
        'à la racine' ou un sous tag</p>
        <br>
        <img src="../src/assets/imgManuel/gestion_tags.png"/>
        <br>

        <br id="titreCinqQuatre">
        <h3 >4/ Evaluations</h3>
        <br>

        <p> Cette option permet la création, la consultation et la suppression d'évaluations. Créer une évaluation permet de conserver l'information sur
        des contenus </p>

        <br id="titreCinqCinq">
        <h3 >5/ Deconnexion</h3>
        <br>
        <p> Quitte OpenQuizz et permet de revenir à l'écran de connexion </p>
        <br>
        <span id="remonterPage"><a href="#titreManuel"> Remonter en haut de la page</a></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Manuel",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    // permet de récupérer la précedente page affichée
    etatTmp: {},
  },
  methods: {
    /**
     * @vuese
     * Descendre ou monter dans l'arborescence du menu latéral du manuel
     * @param e
     */
    naviguer: function (e) {
      e.target.classList.toggle("symboleSectionDown")
      console.log(e.target.parentNode.parentNode.nextSibling)
      e.target.parentNode.parentNode.nextElementSibling.classList.toggle('affiche')

    }
  }
}
</script>

<style scoped>

#menuLateral{
  height: auto;
  width: 14vw;
  margin-left: 5vw;
  margin-top: 5vh;


  border: 1px solid black;
  position: fixed;
}

#sectionPrincipale {
  width: 75vw;
  min-height: 100%;
  height: 100%;
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-left: 21vw;
  border: 1px solid coral;
}

img {
  width: 60vw;
  border: 0.5px solid black;
  margin-bottom: 0.5vh;
}

ul {
  list-style: none;
  padding-left: 1vh;
  padding-top: 1vh;
  text-align: left;
}

a {
  text-decoration: none;
  color: black;
}

p {
  text-align: left;
  text-indent: 3vh;
  margin-top: 0 ;
  margin-bottom: 0 ;
}

.symboleSection::before {
  content: "\27A2";
  display: inline-block;
}

.symboleSectionDown::before {
  transform: rotate(90deg);
}

.symboleSectionInamovible::before {
  content: "\2756";
  display: inline-block;
}

.cache {
  display: none;
}

.affiche {
  display: block;
  margin-top: -1vh;
}

.sousSection{
  list-style: circle inside;

  padding-left: 1vh;
}

.sousSection::before {
  left: 30px;
}

#remonterPage::before {
  content: "\2B06 ";
}


</style>