diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx index 2ad388104e5c35872efddb1bd82a07c92f150c0e..8223824f875c5537aefd7161ee837c29475d253b 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() {