DTL proposals : add custom titles

src/components/design-to-light/DTLPanel.vue

@@ -2,7 +2,7 @@
   <aside
     id="dtl-panel"
     class="text-sm bg-black rounded-2xl"
-    :class="{'with-dialog': isDialogOpen}"
+    :class="{ 'with-dialog': isDialogOpen }"
     aria-labelledby="dtl-label"
     @click="preventClose($event)"
   >
@@ -10,9 +10,16 @@
       class="flex items-center | border-b pl-32 pr-16 py-8"
       data-icon="leaf"
       style="--column-gap: 0.5rem"
-    > 
-      <!-- TODO: ajouter un title à dans le Panel pour chaque propositio et l'utiliser ici pour le h2 -->
-      <h2 id="dtl-label" class="font-serif text-md">Design to Light</h2>
+    >
+      <h2 id="dtl-label" class="font-serif text-md">
+        {{
+          proposals.length > 1 || isDialogOpen
+            ? activeProposal.title
+              ? activeProposal.title
+              : "Design to light"
+            : "Design to light"
+        }}
+      </h2>
       <button
         v-if="!isDialogOpen"
         @click="emits('close')"
@@ -22,7 +29,7 @@
         <span class="sr-only">Fermer</span>
       </button>
     </header>
-    <nav class="tabs" role="tablist" tabindex="-1">
+    <nav v-if="!isDialogOpen" class="tabs" role="tablist" tabindex="-1">
       <button
         v-for="(proposal, index) in proposals"
         @click="activeProposal = proposal"
@@ -30,7 +37,13 @@
         :aria-selected="proposal.isActive"
         aria-controls=""
       >
-        {{ index === 0 ? "Proposition initiale" : "Alternative " + index }}
+        {{
+          activeProposal.title
+            ? activeProposal.title
+            : index === 0
+            ? "Proposition initiale"
+            : "Alternative " + index
+        }}
       </button>
     </nav>
     <section class="overflow-y" tabindex="-1">