From 0e416b0a497eb30864e5d29c0fbf40306fe8ec4b Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Fri, 5 Mar 2021 00:11:55 +0200
Subject: [PATCH] lang menu positioning for group and non-group pages
---
.../menu-language/menu-language.tsx | 27 +++++++++++++------
1 file changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 2ad38810..8223824f 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -73,24 +73,35 @@ export class MenuLanguage {
@Listen('click')
handleComponentClick(event) {
this.isMenuOpen = !this.isMenuOpen;
- const languageMenuSelector = event.target as HTMLElement;
if (this.isMenuOpen) {
// Close desktop menu panel if it's open.
this.menuLanguageToggled.emit();
- let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ const languageMenuSelector = event.target as HTMLElement;
+ this.adjustPosition(languageMenuSelector, this.el);
+ }
+
+ event.stopPropagation();
+ }
+
+ adjustPosition(languageMenuSelector, target) {
+ const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
+ `.menu--language__dropdown`
+ )[0] as HTMLElement;
+ let headerHeight = '0';
+ let hyHeader = this.isGroup
+ ? (target.closest('.hy-site-header__content-top') as HTMLElement)
+ : (target.closest('.hy-site-header') as HTMLElement);
+
+ if (hyHeader) {
let rectHeader = hyHeader.getBoundingClientRect();
let rectLangMenu = languageMenuSelector.getBoundingClientRect();
- const headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
- const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
- `.menu--language__dropdown`
- )[0] as HTMLElement;
- languagePanel.style.top = headerHeight;
+ headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
}
- event.stopPropagation();
+ languagePanel.style.top = headerHeight;
}
componentWillRender() {
--
GitLab