dropdown bottom bar mobile

assets/css/components/_dropdown.scss

@@ -151,7 +151,6 @@
             width: calc(100vw - var(--padding-body)*2);
             left: auto;
             right: 0;
-            background-color: blue!important;
 
             .modal--share {
                 width: 100%;
@@ -167,13 +166,6 @@
 
 #bottom-bar {
 
-       @media #{$x-small} {
-
-
-
-            }
-
-
 
     .dropdown .dropdown__content {
         top: auto;
@@ -193,7 +185,13 @@
             bottom: -13px;
             left: auto;
             right: 10%;
+              @media #{$x-small} {
+                  left: 20%;
+            right: auto;
                 }
+
+        }
+
     }
 
 

assets/css/components/_modal-share.scss

@@ -4,7 +4,7 @@
     background-color: var(--color-bg);
 
     .title {
-        font-size: var(--fs-xsmall);
+        font-size: var(--fs-small);
         line-height: 1.2;
          padding: var(--padding-inner);
          padding-bottom: 0px;
@@ -23,7 +23,7 @@
         list-style: none;
 
         li{
-           font-size: var(--fs-xsmall); 
+           font-size: var(--fs-small); 
            border-bottom: var(--border-light);
            &:first-of-type{
             border-top: var(--border-light);
@@ -34,7 +34,7 @@
                 align-items: center;
                 gap: 2ch;
                 text-decoration: none;
-                  font-size: var(--fs-xsmall); 
+                  font-size: var(--fs-small); 
             }
             .icon {
                 width: 16px;

assets/css/style.css

@@ -1126,7 +1126,7 @@ button.sort[data-sort-type=up] .arrow {
   background-color: var(--color-bg);
 }
 .modal--share .title {
-  font-size: var(--fs-xsmall);
+  font-size: var(--fs-small);
   line-height: 1.2;
   padding: var(--padding-inner);
   padding-bottom: 0px;
@@ -1147,7 +1147,7 @@ button.sort[data-sort-type=up] .arrow {
   list-style: none;
 }
 .modal--share .socials li {
-  font-size: var(--fs-xsmall);
+  font-size: var(--fs-small);
   border-bottom: var(--border-light);
 }
 .modal--share .socials li:first-of-type {
@@ -1158,7 +1158,7 @@ button.sort[data-sort-type=up] .arrow {
   align-items: center;
   gap: 2ch;
   text-decoration: none;
-  font-size: var(--fs-xsmall);
+  font-size: var(--fs-small);
 }
 .modal--share .socials li .icon {
   width: 16px;
@@ -1353,7 +1353,6 @@ button.sort[data-sort-type=up] .arrow {
     width: calc(100vw - var(--padding-body) * 2);
     left: auto;
     right: 0;
-    background-color: blue !important;
   }
   .dropdown .dropdown__content .modal--share {
     width: 100%;
@@ -1379,6 +1378,12 @@ button.sort[data-sort-type=up] .arrow {
   left: auto;
   right: 10%;
 }
+@media screen and (max-width: 560px) {
+  #bottom-bar .dropdown .dropdown__content::before {
+    left: 20%;
+    right: auto;
+  }
+}
 #bottom-bar .dropdown.is-open .dropdown__content {
   transform: translateX(0);
 }

assets/js/dropdown.js

@@ -1,4 +1,4 @@
-export function initDropdowns(responsiveSmall) {
+export function initDropdowns(responsiveSmall, responsiveSmallX) {
   const dropdowns = document.querySelectorAll('.dropdown');
 
   function updateBodyOverflow(isOpen, dropdownElement = null) {
@@ -33,6 +33,8 @@ export function initDropdowns(responsiveSmall) {
         if (other !== dropdown) {
           other.classList.remove('is-open', 'dropdown--align-right');
           other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+          const otherContent = other.querySelector('.dropdown__content');
+          if (otherContent) otherContent.style.transform = '';
         }
       });
 
@@ -56,6 +58,19 @@ export function initDropdowns(responsiveSmall) {
       dropdown.classList.toggle('is-open');
       trigger.classList.toggle('is-selected');
 
+      // Décalage horizontal pour #bottom-bar sur petit écran
+      if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
+        if (dropdown.classList.contains('is-open')) {
+          requestAnimationFrame(() => {
+            const rect = content.getBoundingClientRect();
+            const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
+            content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
+          });
+        } else {
+          content.style.transform = '';
+        }
+      }
+
       // Gère l'overflow du body sur mobile
       updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
     });
@@ -70,6 +85,8 @@ export function initDropdowns(responsiveSmall) {
       }
       dropdown.classList.remove('is-open', 'dropdown--align-right');
       dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+      const c = dropdown.querySelector('.dropdown__content');
+      if (c) c.style.transform = '';
     });
     updateBodyOverflow(false);
   });
@@ -80,6 +97,8 @@ export function initDropdowns(responsiveSmall) {
       dropdowns.forEach(dropdown => {
         dropdown.classList.remove('is-open', 'dropdown--align-right');
         dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+        const c = dropdown.querySelector('.dropdown__content');
+        if (c) c.style.transform = '';
       });
       updateBodyOverflow(false);
     }

assets/js/script.js

@@ -10,6 +10,7 @@ import { initSort } from './sort.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
+const responsiveSmallX = 560;
 
 window.onload = async function () {
   console.log("SCRIPT LOADED");
@@ -20,7 +21,7 @@ window.onload = async function () {
 
   copyLink();
   playVideo();
-  initDropdowns(responsiveSmall);
+  initDropdowns(responsiveSmall, responsiveSmallX);
   initSwipers();
 
   progressBar();