Backdrop

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -44,19 +44,20 @@ export class HyMenuMainGroup {
 
   @Listen('click')
   handleComponentClick(event) {
-    this.mobileMenuTopToggle.emit();
+    event.preventDefault();
+    event.stopPropagation();
     this.isMenuOpen = !this.isMenuOpen;
 
     if (this.isMenuOpen) {
       this.emitEvent();
       this.adjustMainMenuPosition(event.target);
     }
-
-    event.stopPropagation();
   }
 
   @Listen('keydown')
   handleComponentKeyDown(event: KeyboardEvent) {
+    event.stopPropagation();
+    event.preventDefault();
     const key = event.code;
     let target = event.target as HTMLButtonElement;
 
@@ -66,8 +67,6 @@ export class HyMenuMainGroup {
       if (this.isMenuOpen) {
         this.emitEvent();
         this.adjustMainMenuPosition(target);
-
-        event.preventDefault();
       }
     }
   }
@@ -75,6 +74,7 @@ export class HyMenuMainGroup {
   emitEvent() {
     // Close other panels if they are open (lang menu, search, main menu, ..).
     this.universityMainMenuToggled.emit();
+    this.mobileMenuTopToggle.emit();
   }
 
   adjustMainMenuPosition(target) {
@@ -103,10 +103,17 @@ export class HyMenuMainGroup {
     event.stopPropagation();
   }
 
+  handleTopMenuClose(event) {
+    this.isMenuOpen = false;
+    this.mobileMenuTopToggle.emit();
+    event.stopPropagation();
+  }
+
   // Close the University main menu if user clicks anywhere outside the component.
   @Listen('click', {target: 'window'})
   handleOutsideMenuClick(event) {
     this.isMenuOpen = false;
+    this.handleTopMenuClose(event);
     event.stopPropagation();
   }
 
@@ -166,7 +173,7 @@ export class HyMenuMainGroup {
                 label={this.siteLabel}
               />
             </div>
-            <button class="menu--main-group__dropdown__close" onClick={() => this.isMenuOpen == false}>
+            <button class="menu--main-group__dropdown__close" onClick={(e) => this.handleTopMenuClose(e)}>
               <hy-icon icon={'hy-icon-remove'} size={20} fill={white} />
             </button>
           </div>

src/components/site-header/site-header.scss

@@ -76,6 +76,10 @@
   position: relative;
   z-index: 99;
 
+  &.is-open {
+    z-index: 98;
+  }
+
   @include breakpoint($narrow) {
     margin: 0 auto;
     max-width: $fullhd;
@@ -266,7 +270,15 @@
     transition: background-color 300ms;
     visibility: visible;
     width: inherit; //??
-    z-index: 99;
+    z-index: 100;
+  }
+
+  &.is-active-top {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: background-color 300ms;
+    visibility: visible;
+    width: inherit; //??
+    z-index: 98;
   }
 }
 

src/components/site-header/site-header.tsx

@@ -48,6 +48,7 @@ export class SiteHeader {
   @State() isMobile: boolean;
   @State() isMenuOpen: boolean = false;
   @State() isDesktopMenuOpen: boolean = false;
+  @State() isTopMenuOpen: boolean = false;
 
   @Event() headerScrollUp: EventEmitter;
   @Event() headerScrollDown: EventEmitter;
@@ -74,7 +75,8 @@ export class SiteHeader {
 
   // Listener for toggling mobile menu top panel on or off.
   @Listen('mobileMenuTopToggle') mobileMenuTopToggle() {
-    this.isMenuOpen = !this.isMenuOpen;
+    //this.isMenuOpen = !this.isMenuOpen;
+    this.isTopMenuOpen = !this.isTopMenuOpen;
     this.menuMobileTopToggled.emit();
   }
 
@@ -449,8 +451,9 @@ export class SiteHeader {
         return (
           <header class={classAttributes.join(' ')}>
             <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
+            <div class={{'hy-backdrop': true, 'is-active-top': this.isTopMenuOpen}} />
             {this.isGroup && (
-              <div class="hy-site-header__content-top" is-mobile={true}>
+              <div class={{'hy-site-header__content-top': true, 'is-open': this.isTopMenuOpen}} is-mobile={true}>
                 <div class={'hy-site-header__logo-container group '}>
                   <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
                 </div>