main menu threshold scroll

assets/js/theme/design-system/dropdowns.js

@@ -14,6 +14,12 @@ class Dropdown {
         this.dropdownButton.addEventListener('click', () => {
             this.toggleDropdown();
         });
+
+        window.addEventListener('keydown', (event) => {
+            if (event.keyCode === 27 || event.key === 'Escape') {
+                this.toggleDropdown(false);
+            }
+        });
     }
 
     toggleDropdown (open = !this.state.isOpened) {

assets/js/theme/design-system/mainMenu.js

@@ -135,7 +135,9 @@ class MainMenu {
     onScroll () {
         const offset = this.element.offsetHeight,
             y = window.scrollY,
-            isNearTop = y < offset;
+            isNearTop = y < offset,
+            threshold = 50;
+        let hasChanged = false;
 
         if (isNearTop) {
             this.element.classList.remove(CLASSES.sticky);
@@ -143,13 +145,17 @@ class MainMenu {
             this.element.classList.add(CLASSES.sticky);
         }
 
-        if (y > this.state.previousScrollY && !isNearTop) {
+        if (y > this.state.previousScrollY + threshold && !isNearTop) {
             document.documentElement.classList.add(CLASSES.scrollingDown);
-        } else {
+            hasChanged = true;
+        } else if (y < this.state.previousScrollY - threshold){
             document.documentElement.classList.remove(CLASSES.scrollingDown);
+            hasChanged = true;
         }
 
-        this.state.previousScrollY = y;
+        if (hasChanged) {
+            this.state.previousScrollY = y;
+        }
     }
 }
 

assets/sass/_theme/blocks/testimonials.sass

@@ -33,9 +33,11 @@
     .avatar
         flex-shrink: 0
         width: calc(#{col(1, 8)} + #{$grid-gutter} / 2)
-        margin-right: calc(#{$grid-gutter} / 2)
+        min-width: px2rem(80)
+        margin-right: $spacing0
         margin-bottom: 0
-        // @include media-breakpoint-up(xxl)
+        @include media-breakpoint-up(md)
+            margin-right: calc(#{$grid-gutter} / 2)
         //     width: calc(#{col(1, 7)} + #{$grid-gutter} / 2)
 
     .splide
@@ -99,6 +101,8 @@
             figure
                 padding-left: offset(2)
                 padding-right: offset(1)
+                // TODO: explain this, add min height equal with 2 cols width to avoid overflow on square picture
+                min-height: calc(#{col-outside-container(2)} + #{half($grid-gutter)})
                 &.with-picture
                     position: relative
                     figcaption