FEATURE optimizing mobile index-panel on singles articles

resources/css/components/index-panel.css

@@ -14,6 +14,13 @@
         @apply w-7 h-7 block;
       }
     }
+    button#mobile-open-toggle {
+      @apply lg:hidden ml-auto !opacity-100;
+      .icon {
+        transition: transform 0.3s ease-in-out;
+        @apply h-10 w-10;
+      }
+    }
     button[aria-selected='true'] {
       @apply text-primary opacity-100;
       .icon {
@@ -75,3 +82,31 @@
     }
   }
 }
+
+@media (max-width: 1024px) {
+  .index-panel__content {
+    transition: height 0.3s ease-in-out;
+  }
+
+  .index-panel[data-mobile-open='false'] .index-panel__content {
+    @apply h-0 py-2;
+    ul.sommaire-index,
+    ul.footnotes-index {
+      @apply hidden;
+    }
+  }
+
+  .index-panel[data-mobile-open='true'] .index-panel__header {
+    @apply h-fit py-4;
+    button#mobile-open-toggle {
+      img {
+        transition: transform 0.3s ease-in-out;
+        @apply rotate-180;
+      }
+    }
+    ul.sommaire-index,
+    ul.footnotes-index {
+      @apply block;
+    }
+  }
+}

resources/css/pages/singles.css

@@ -154,10 +154,11 @@
     /* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */
     /* We need to reverse the content order */
     @media (max-width: 1024px) {
-      @apply sticky bottom-0;
+      @apply sticky bottom-0 z-50;
       order: 2;
       @apply sticky bottom-0;
       align-self: flex-end;
+      
     }
   }
 }

resources/img/icons/open-close-arrow-button.svg

@@ -0,0 +1,4 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 22.5C1 10.6259 10.6259 1 22.5 1C34.3741 1 44 10.6259 44 22.5C44 34.3741 34.3741 44 22.5 44C10.6259 44 1 34.3741 1 22.5Z" stroke="white" stroke-width="2"/>
+<path d="M13.5 18.4499L22.2518 26.9999L31.5 18.45" stroke="white" stroke-width="2"/>
+</svg>

resources/js/singles/index-panel.ts

@@ -8,6 +8,24 @@ export default function handleIndexPanel(): void {
   observeTabsButtons();
   observeFootnotesLinks();
   observeSommaireLinks();
+  handleMobileOpenToggle();
+}
+
+function handleMobileOpenToggle(): void {
+  const mobileOpenToggle = document.querySelector('#mobile-open-toggle');
+  const indexPanel = document.querySelector('.index-panel');
+  if (!mobileOpenToggle) return;
+  if (!indexPanel) return;
+
+  mobileOpenToggle.addEventListener('click', () => {
+    const isMobileOpen = indexPanel.getAttribute('data-mobile-open');
+    console.log(isMobileOpen);
+    if (isMobileOpen === 'true') {
+      indexPanel.setAttribute('data-mobile-open', 'false');
+    } else {
+      indexPanel.setAttribute('data-mobile-open', 'true');
+    }
+  });
 }
 
 // HANDLE TABS

template-parts/articles/index-panel.php

@@ -1,5 +1,5 @@
 <?php ?>
-<div class="index-panel">
+<div class="index-panel" data-mobile-open="false">
 	<div class="index-panel__header">
 		<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
 			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
@@ -9,6 +9,10 @@
 			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
 			Notes
 		</button>
+		<button id="mobile-open-toggle" class=" index-panel__mobile-open-toggle">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/open-close-arrow-button.svg" alt="Ouvrir le menu rapide">
+
+		</button>
 	</div>
 
 	<div class="index-panel__content">