FEATURE Adapting responsive different behaviour for index panel

resources/css/components/article-revues-toolbar.css

@@ -3,9 +3,15 @@
   @apply col-span-2 container mx-auto;
 
   .tablist {
-    @apply flex items-center gap-12 border-b border-primary;
+    @apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
     button {
-      @apply text-xl  mt-8  nunito pb-4 flex items-center gap-4;
+      @apply text-base md:text-lg  lg:text-xl  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left;
+      grid-template-columns: auto 1fr;
+      /* white-space: normal;
+      word-wrap: break-word; */
+      /* break-word: break-; */
+      word-break: keep-all;
+
       .icon {
         @apply w-8 h-8 block;
       }

resources/css/components/index-panel.css

@@ -1,13 +1,13 @@
 .index-panel {
-  @apply p-6 m-0  border-primary border my-2;
-  max-height: 80vh;
-  overflow-y: auto;
+  @apply m-0  border-primary border my-2;
+  /* max-height: 80vh;
+  overflow-y: auto; */
 
   &__header {
-    @apply flex gap-4  border-b border-gray-300 mb-8;
+    @apply p-4 md:p-6 pb-0 flex gap-4  border-b border-gray-300;
 
     button {
-      @apply pb-6  text-carhop-gray opacity-60 relative;
+      @apply pb-6 text-base md:text-lg  text-carhop-gray opacity-60 relative;
       box-sizing: border-box;
       @apply flex items-center gap-2;
       .icon {
@@ -33,10 +33,16 @@
   }
 
   &__content {
+    @apply p-4;
+
     overflow-wrap: anywhere;
     ul[aria-hidden='true'] {
       @apply hidden;
     }
+    ul.sommaire-index,
+    ul.footnotes-index {
+      @apply bg-white overflow-y-auto max-h-[200px] lg:max-h-[calc(80vh-80px)] p-6 mb-0;
+    }
   }
 
   .sommaire-index a:hover,
@@ -44,4 +50,28 @@
     @apply text-carhop-green-800 underline-offset-8 underline decoration-neutral-400;
     text-decoration-thickness: 1px;
   }
+
+  @media (max-width: 960px) {
+    @apply bg-carhop-green-700 relative  z-50;
+
+    .index-panel__header {
+      border-bottom: 0.25px solid rgba(255, 255, 255, 0.4);
+      button {
+        @apply text-white;
+
+        img {
+          @apply filter-white;
+        }
+        &[aria-selected='true'] {
+          @apply text-white opacity-100;
+          .icon {
+            @apply filter-white opacity-100;
+          }
+          &:after {
+            @apply bg-white;
+          }
+        }
+      }
+    }
+  }
 }

resources/css/pages/singles.css

@@ -1,8 +1,16 @@
 .page--single-revue,
 .page--single-articles {
   .content-wrapper {
-    @apply container mx-auto grid grid-cols-12 gap-12 py-12 items-start;
+    /* @apply bg-yellow-400; */
+    @apply container;
+    @apply mx-auto grid  gap-12 py-12 items-start;
+
     grid-template-columns: 1fr 2fr;
+
+    @media (max-width: 1024px) {
+      grid-template-columns: 1fr;
+    }
+
     &[data-active-tab='article'] {
       #article-tags,
       #article-authors,
@@ -56,7 +64,11 @@
   }
 
   .sidebar {
-    @apply sticky top-0 left-0 h-fit;
+    @media (max-width: 1024px) {
+      #article-tags {
+        @apply hidden;
+      }
+    }
     .search-field {
       input {
         @apply border border-primary w-full;
@@ -133,3 +145,19 @@
     @apply text-4xl  uppercase font-thin mb-12;
   }
 }
+
+/* HANDLING STICKY SIDEBAR ON MOBILE */
+.content-wrapper[data-active-tab='article'] {
+  .sidebar {
+    @apply sticky top-0;
+
+    /* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */
+    /* We need to reverse the content order */
+    @media (max-width: 1024px) {
+      @apply sticky bottom-0;
+      order: 2;
+      @apply sticky bottom-0;
+      align-self: flex-end;
+    }
+  }
+}

resources/js/singles/index-panel.ts

@@ -122,17 +122,20 @@ export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void {
 
 export function scrollToFootnoteInIndexPanel(footnoteId: string): void {
   const footnotesIndex = document.querySelector('#footnotes-index') as HTMLElement;
-  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
-  const currentFootnote = indexPanel?.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
+  const footnotesIndexContainer = document.querySelector('ul#footnotes-index');
+  const indexPanelContent = document.querySelector('.index-panel__content') as HTMLElement;
+  const currentFootnote = footnotesIndexContainer?.querySelector(
+    `a[href="#${footnoteId}"]`
+  ) as HTMLElement;
 
-  if (currentFootnote && indexPanel) {
-    const containerRect = indexPanel.getBoundingClientRect();
+  if (currentFootnote && footnotesIndexContainer) {
+    const containerRect = footnotesIndexContainer.getBoundingClientRect();
     const elementRect = currentFootnote.getBoundingClientRect();
 
     const relativeTop = elementRect.top - containerRect.top;
-    const scrollTop = indexPanel.scrollTop + relativeTop - 20;
+    const scrollTop = footnotesIndexContainer.scrollTop + relativeTop - 20;
 
-    indexPanel.scrollTo({
+    footnotesIndexContainer.scrollTo({
       top: scrollTop,
       behavior: 'smooth',
     });