From f32acad5c6995d66bbcb1ba0cd9512f099e57cd3 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Tue, 3 Nov 2020 16:02:42 +0200
Subject: [PATCH] menu lang backdrop
---
.../menu-language/menu-language.scss | 16 ++++++++++++++++
.../navigation/menu-language/menu-language.tsx | 18 ++++++++++++++++++
src/components/site-header/site-header.tsx | 1 +
3 files changed, 35 insertions(+)
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index fe8ead0f..aa6a38eb 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -122,3 +122,19 @@
width: 16px;
}
}
+
+.hy-menu-backdrop {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ visibility: hidden;
+
+ &.is-active {
+ background-color: rgba(0, 0, 0, 0.4);
+ transition: background-color 300ms;
+ visibility: visible;
+ z-index: 99;
+ }
+}
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index ca837147..a9daf0e3 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -34,6 +34,24 @@ export class MenuLanguage {
@Listen('languageMenuToggle') languageMenuToggle() {
this.isMenuOpen = !this.isMenuOpen;
+
+ //console.log(document.querySelectorAll('.hy-site-header')[0]);
+ //let hyBackdropDiv = document.querySelectorAll('.hy-backdrop')[0];
+
+ let hyHeader = this.el.closest('.hy-site-header');
+ console.log((hyHeader as HTMLElement).children[0]);
+ let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+ console.log(hyBackdropDiv);
+ if (hyBackdropDiv) {
+ if (this.isMenuOpen) {
+ (hyBackdropDiv as HTMLElement).classList.add('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '90px';
+ } else {
+ (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '0';
+ }
+ }
}
componentWillRender() {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 68fbb869..6ffe0687 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -113,6 +113,7 @@ export class SiteHeader {
case MenuType.desktop:
return (
<header class={classAttributes.join(' ')}>
+ <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
<div class={'hy-site-header__logo-container'}>
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
</div>
--
GitLab