css ancre

web/themes/custom/reha/dist/css/bundle.css

@@ -2584,13 +2584,41 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   position: relative;
 }
 .page-programme .layout__region--first .block-region-first {
-  padding-left: 18%;
+  padding-left: 20%;
   display: flex;
   justify-content: flex-end;
   position: -webkit-sticky;
   position: sticky;
   top: 10rem;
 }
+.page-programme .layout__region--first .block-region-first > .block-block-content {
+  width: 100%;
+}
+.page-programme .layout__region--first .block-region-first > .block-block-content ul {
+  padding-left: 0;
+  padding-right: 30%;
+}
+.page-programme .layout__region--first .block-region-first > .block-block-content ul li a {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+}
+.page-programme .layout__region--first .block-region-first > .block-block-content ul li a::after {
+  content: "";
+  width: 25%;
+  margin-top: 0.6rem;
+  border-bottom: #fdc300 solid 1px;
+}
+.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active {
+  font-weight: 800;
+}
+.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover::after, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active::after {
+  content: "";
+  width: 25%;
+  margin-top: 0.6rem;
+  border-bottom: #fdc300 solid 2px;
+}
 .page-programme .block-region-second h2 {
   font-weight: 1000;
   font-size: 1.8rem;

web/themes/custom/reha/js/reha.js

@@ -194,19 +194,54 @@ jQuery(document).ready(function($){
 //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
 
 
-// (function($, window) {
-//   var adjustAnchor = function() {
-//       var $anchor = $('.block-region-first'),
-//               fixedElementHeight = 500;
-//       if ($anchor.length > 0) {
-//           $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
-//       }
-//   };
-
-//   $(window).on('hashchange', function() {
-//       adjustAnchor();
-//   });
-// });  
+
+// function adjustAnchor() {
+//   var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
+//   var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
+
+//   if ($anchor.length > 0) {
+//     $('html, body').stop().animate({
+//       scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
+//     }, 0);
+//   }
+// }
+
+// // Call the function on page load if there's a hash
+// if (window.location.hash) {
+//   adjustAnchor();
+// }
+
+// // Adjust the anchor on hash change
+// $(window).on('hashchange', function() {
+//   adjustAnchor();
+// });
+
+
+
+//////////////////////////////////////////
+// menu ancre paragraphe quand actif
+     
+  jQuery(function($) {
+    // Function to set the active class based on the current path
+    function setActiveLink() {
+        var path = window.location.href;
+        console.log(path);
+        $(".layout__region--first .block-region-first li a").each(function() {
+            if (this.href === path) {
+                $(this).closest('a').addClass('active');
+            }
+        });
+    }
+
+    // Initially set the active link based on the current URL
+    setActiveLink();
+
+    // Update the active link on click
+    $(".layout__region--first .block-region-first li a").on('click', function() {
+        $(".layout__region--first .block-region-first li a").removeClass('active');
+        $(this).addClass('active');
+    });
+  });
 
 
 })(jQuery, window);

web/themes/custom/reha/scss/pages/le-programme.scss

@@ -4,13 +4,45 @@
 
         position: relative;
         .block-region-first{
-            padding-left: 18%;
+
+            padding-left: 20%;
             display: flex;
             justify-content: flex-end;
             position: -webkit-sticky;
             position: sticky;
             top: 10rem;
-    
+            > .block-block-content{
+                width: 100%;
+                ul{
+                    padding-left: 0;
+                    padding-right: 30%;
+                    li{
+                        a{
+                            display: flex;
+                            flex-direction: column;
+                            padding-bottom: 0.6rem;
+                            padding-top: 0.6rem;
+                            &::after{
+                                content:'';
+                                width: 25%;
+                                margin-top: 0.6rem;
+                                border-bottom: $yellow-puca solid 1px;
+                            }
+
+                            &:hover,
+                            &.active{
+                                font-weight: 800;
+                                &::after{
+                                    content:'';
+                                    width: 25%;
+                                    margin-top: 0.6rem;
+                                    border-bottom: $yellow-puca solid 2px;
+                                }
+                            } 
+                        }
+                    }
+                }
+            }
         }
     }
     .block-region-second{
@@ -28,7 +60,7 @@
             padding-top: 1rem;
         }
 
-       .block-config-pages-block{
+    .block-config-pages-block{
         margin: 0;
         width: 80%;
         padding-top: 1rem;
@@ -69,11 +101,11 @@
                 .field--name-field-lien{
                     background-color: none;
                 }
-               
+            
             
             }
         }
-      }
+    }
     }
 }