feat: added group section

index.html

@@ -32,7 +32,11 @@
       <div class="flex flex-col md:flex-row gap-4">
 
         <section id="panel-top" class="w-full md:w-1/2 border border-base-300 rounded-box p-4">
-          <h2 class="text-lg font-semibold mb-2">Secciones</h2>
+          <div class="flex items-center justify-between mb-2">
+            <h2 class="text-lg font-semibold">Secciones</h2>
+            <button id="toggle-collapse-all" type="button" class="btn btn-xs btn-outline"
+              data-collapse-all-label="Colapsar todo" data-expand-all-label="Expandir todo">Colapsar todo</button>
+          </div>
           <div class="flex flex-wrap gap-2 mb-4">
             <button id="add-title-section" type="button" class="btn btn-sm"
               data-type-label="Título" data-placeholder="Título...">+ Título</button>
@@ -44,10 +48,13 @@
               data-type-label="Imagen">+ Imagen</button>
             <button id="add-dnd-section" type="button" class="btn btn-sm"
               data-type-label="Patrón" data-elements-label="Elementos">+ Patrón</button>
+            <button id="add-group-section" type="button" class="btn btn-sm"
+              data-type-label="Grupo">+ Grupo</button>
           </div>
           <div id="panel-top-sections" class="flex flex-col gap-4"
             data-drag-title="Arrastrar para reordenar"
             data-collapse-title="Colapsar / expandir"
+            data-duplicate-title="Duplicar sección"
             data-remove-title="Eliminar sección"></div>
         </section>
 
@@ -64,8 +71,8 @@
     <!-- Fuente de datos de los elementos arrastrables: se mantiene oculta y
          se clona (haciéndola visible) dentro de cada sección de arrastrar y soltar. -->
     <ul id="draggable-items-source" class="menu bg-base-100 w-full hidden">
-      <li class="my-2 breadcrumb cursor-pointer" id="1"> PB</li>
-      <li class="my-2 breadcrumb cursor-pointer" id="2">Disminución</li>
+      <li class="my-2 breadcrumb cursor-pointer select-none" id="1"> PB</li>
+      <li class="my-2 breadcrumb cursor-pointer select-none" id="2">Disminución</li>
     </ul>
   </main>
 </body>