menu mobile

web/themes/custom/caravane/assets/js/main.js

@@ -1,6 +1,6 @@
 import { initVueContentModale } from './utils/vue-setup';
 import { processClickableElements } from './utils/process-clickable-elements';
-import { setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
+import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
 import { initFirstLoadRouting, handleClickableElements } from './utils/handle-navigation';
 import { setupMapStore } from './utils/map-setup';
 
@@ -17,6 +17,7 @@ import '../scss/main.scss'
             const siteName = document.querySelector('#site_name').innerText;
             const { store, mapStore, router, route } = initVueContentModale();            
 
+            handleReactiveness();
             setMenuToggle();
             setHamburgerWhenLogged(drupalSettings);
 

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+export const useLayoutStore = defineStore('layout', {
+    state: () => ({
+        minDesktopWidth: 992,
+        isDesktop: Boolean,
+        isEtapeListRetracted: Boolean,
+    }),
+    actions: {
+        setupResizeListenner () {
+            this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
+            window.addEventListener('resize', () => {
+                this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
+            })
+            this.isEtapeListRetracted = this.isDesktop ? false : true;
+        },
+    },
+})

web/themes/custom/caravane/assets/js/utils/layout-setup.js

@@ -1,3 +1,54 @@
+import { useLayoutStore } from '../stores/layout';
+
+export function handleReactiveness() {
+  const layoutStore = useLayoutStore();
+  layoutStore.setupResizeListenner();
+
+  (function setupEtapeListeCollapse() {
+    const listeToggleButton = document.querySelector('#retractable-message');
+
+    const listeEtape = document.querySelector('#etapes-liste');
+
+    if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
+
+    window.addEventListener('resize', () => {
+      if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
+        expandEtapeListe(listeEtape, layoutStore);
+      } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
+        collapseEtapeListe(listeEtape, layoutStore);
+      }
+    });
+
+    listeToggleButton.addEventListener('click', () => {  
+      if (!layoutStore.isDesktop) {
+        if (!layoutStore.isEtapeListRetracted) {
+          collapseEtapeListe(listeEtape, layoutStore);
+        } else {
+          expandEtapeListe(listeEtape, layoutStore);
+        }
+      }  
+    });
+  })();
+
+  function collapseEtapeListe(listeEtape, layoutStore) {
+    listeEtape.classList.add('retracted');
+    setTimeout(() => {
+      listeEtape.closest('.layout__region').classList.add('retracted');
+      listeEtape.nextElementSibling.classList.add('retracted');
+    }, 300);
+    layoutStore.isEtapeListRetracted = true;
+  }
+
+  function expandEtapeListe(listeEtape, layoutStore) {
+    listeEtape.closest('.layout__region').classList.remove('retracted');
+    listeEtape.nextElementSibling.classList.remove('retracted');
+    setTimeout(() => {
+      listeEtape.classList.remove('retracted');
+    }, 300);
+    layoutStore.isEtapeListRetracted = false;
+  }
+}
+
 export function setMenuToggle() {
     const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
     const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');

web/themes/custom/caravane/assets/pictograms/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-305 200-586l95-94 185 185 186-185 95 94-281 281Z"/></svg>

web/themes/custom/caravane/assets/scss/main.scss

@@ -1,5 +1,7 @@
 @import 'fonts.scss';
 
+$desktop-min-width: 992px;
+
 $body-margin-x: 30px;
 $body-margin-y: 5px;
 $body-margin-bottom: 4vh;
@@ -17,9 +19,11 @@ $main-color-light: #635b58;
 $light-color: #faf1eb;
 $brand-color: #80c8bf;
 
-$menu-width: 15vw;
+$menu-mobile-width: 60vw;
+$menu-desktop-width: 20vw;
 $menu-margin: 2rem;
 
+
 body{
   font-family: 'Marianne', sans-serif;
   color: $main-color;
@@ -38,29 +42,39 @@ body{
         display: grid;
         grid-template-columns: repeat(16, 1fr);
         > #block-caravane-logorepublique {
-          grid-column: 1 / span 1;
+          grid-column: 7 / span 3;
           display: flex;
           align-items: center;
+          @media screen and (min-width: $desktop-min-width) {
+            grid-column: 1 / span 1;            
+          }
           > div > div > a > img {
             width: 100%;
             height: auto;
           }
         }
         > #block-caravane-logoepau {
-          grid-column: 2 / span 2;
+          grid-column: 10 / span 6;
           display: flex;
           align-items: center;
           padding-right: 2.5rem;
+          @media screen and (min-width: $desktop-min-width) {
+            grid-column: 2 / span 2;            
+          }
           > div > div > a > img {
             width: 100%;
             height: auto;
           }
         }
         > #block-caravane-logocaravane {
-          grid-column: 8 / span 2;
+          grid-column: 1 / span 5;
+          grid-row: 1;
           padding-top: 0.5rem;
           display: flex;
           align-items: center;
+          @media screen and (min-width: $desktop-min-width) {
+            grid-column: 8 / span 2;            
+          }
           > div > div > a > img {
             width: 100%;
             height: auto;
@@ -79,7 +93,7 @@ body{
             z-index: 2;
             background-color: $brand-color;
             position: fixed;
-            width: $menu-width;
+            width: $menu-mobile-width;
             right: 0;
             top: 0;
             padding-top: 2.8vh;
@@ -91,6 +105,9 @@ body{
             transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
             opacity: 0;
             align-items: center;
+            @media screen and (min-width: $desktop-min-width) {
+              width: $menu-desktop-width;
+            }
             > p {
               padding-left: $menu-margin;
               margin: 10px 0;
@@ -173,7 +190,7 @@ body{
               list-style-type: none;
               background-color: white;
               position: fixed;
-              width: $menu-width;
+              width: $menu-mobile-width;
               right: $body-margin-x;
               padding: 0;
               padding-top: 1.5rem;
@@ -182,6 +199,9 @@ body{
               opacity: 0;
               transition: top 0.3s ease-out, opacity 0.2s ease-out;
               z-index: 1;
+              @media screen and (min-width: $desktop-min-width) {
+                width: $menu-desktop-width;
+              }
               > li {
                 padding-left: $menu-margin;
                 margin: 15px 0;
@@ -474,20 +494,39 @@ body{
 
                 }
               }*/
-            } 
+            }
             > .layout__region--third {
               padding-right: $body-margin-x;
               height: 100%;
-              grid-column: 11 / span 6;
+              grid-column: 4 / span 13;
               position: relative;
               z-index: 2;
-              background: linear-gradient(to right, transparent, #faf1eb);
               display: flex;
+              background: linear-gradient(to right, #faf1ebaa, #faf1eb);
               align-items: center;
               justify-content: flex-end;
               pointer-events: none;
-              > div {
+              max-width: 100%;
+              transition: all 0.3s ease-out;
+              justify-self: end;
+              &.retracted {
+                max-width: 25%;
+                grid-column: 16 / span 1;
+              }
+              @media screen and (min-width: $desktop-min-width) {
+                background: linear-gradient(to right, transparent, #faf1eb);
+                grid-column: 11 / span 6;
+              }
+              > div #etapes-liste {
                 pointer-events: auto;
+                padding-right: 2rem;
+                width: 100%;
+                overflow: hidden;
+                opacity: 1;
+                transition: opacity 0.3s ease-out;
+                &.retracted {
+                  opacity: 0;
+                }
                 ul {
                   list-style: none;
                   > li {
@@ -564,7 +603,6 @@ body{
                       justify-content: center;
                       align-items: center;
                       > div {
-                        background-color: red;
                         display: block;
                         width: 20px;
                         height: 10px;
@@ -586,6 +624,49 @@ body{
                   }
                 }
               }
+              #retractable-message {
+                cursor: pointer;
+                pointer-events: auto;
+                color: $light-color;
+                position: fixed;
+                top: 50%;
+                text-wrap: nowrap;
+                right: 70vw;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                transform: rotate(90deg) scale(1);
+                transition: all 0.3s ease-out;
+                &:hover {
+                  transform: rotate(90deg) scale(1.05);
+                }
+                &.retracted {
+                  right: -3vw;
+                  > div {
+                    transform: rotate(0deg);
+                  }
+                }
+                @media screen and (min-width: $desktop-min-width) {
+                  display: none;
+                }
+                > p {
+                  background-color: $main-color;
+                  padding: 0.5rem 1rem;
+                  border-radius: 1.3rem;
+                  margin: 0;
+                  margin-bottom: 0.2rem;
+                  font-size: $sm-font-size;
+                }
+                > div {
+                  width: 20px;
+                  height: 20px;
+                  background-color: $main-color;
+                  mask: url('/themes/custom/caravane/assets/pictograms/chevron-down.svg') no-repeat center;
+                  mask-size: contain;
+                  transform: rotate(180deg);
+                  transition: transform 0.3s ease-out;
+                }
+              }
             } 
           }
           > .user-login-form {

web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig

@@ -38,3 +38,7 @@
     {{ content }}
   {% endblock %}
 </div>
+<div id="retractable-message">
+  <p>Liste des arrêts</p>
+  <div></div>
+</div>