From 660167218cb5a4bb66aa6d79518ba92f1f49aeb5 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Tue, 7 Mar 2023 10:45:42 +0100
Subject: [PATCH] fix header menu max height
---
assets/js/theme/design-system/mainMenu.js | 1 +
assets/sass/_theme/design-system/layout.sass | 1 +
assets/sass/_theme/design-system/nav.sass | 3 ++-
3 files changed, 4 insertions(+), 1 deletion(-)
diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js
index 217a017b..0dc8775e 100644
--- a/assets/js/theme/design-system/mainMenu.js
+++ b/assets/js/theme/design-system/mainMenu.js
@@ -60,6 +60,7 @@ class MainMenu {
resize () {
const isMobile = window.innerWidth <= breakpoints.md;
document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
+ document.documentElement.style.setProperty('--header-menu-max-height', (window.innerHeight - this.element.offsetHeight) + 'px');
// is state changed ?
if (this.state.isMobile === isMobile) {
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index c836ae9f..36bfc05f 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -13,6 +13,7 @@
--grid-gutter: #{$grid-gutter}
--grid-max-width: #{$grid-max-width}
--header-height: #{$header-height}
+ --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
@include media-breakpoint-up(desktop)
--header-height: #{$header-height-desktop}
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 104527e0..4b8c63b5 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -7,12 +7,13 @@
opacity: 0
.menu
+
@include media-breakpoint-down(desktop)
-webkit-flex-basis: 100vw
display: none
flex-basis: 100vw
margin-top: $spacing1
- max-height: calc(100vh - var(--header-height) - #{$spacing4})
+ max-height: var(--header-menu-max-height)
overflow: auto
a,
a:focus,
--
GitLab