Merge branch 'development'

src/components.d.ts

@@ -2058,6 +2058,7 @@ declare namespace LocalJSX {
     menuLabelOpen?: string;
     menuType?: MenuType;
     onHeaderScrollUp?: (event: CustomEvent<any>) => void;
+    onMenuMobileToggled?: (event: CustomEvent<any>) => void;
   }
   interface HySiteLogo {
     color?: ColorVariant;

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -139,7 +139,7 @@ export class HyDesktopMenuLinks {
 
     // Add shadow backdrop
     let rect = activeMenuItemSibling.getBoundingClientRect();
-    //this.showBackdropShadow('open', rect.bottom);
+
     let shadowTop = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
       ? this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height
       : this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height;

src/components/site-header/readme.md

@@ -21,9 +21,10 @@
 
 ## Events
 
-| Event            | Description | Type               |
-| ---------------- | ----------- | ------------------ |
-| `headerScrollUp` |             | `CustomEvent<any>` |
+| Event               | Description | Type               |
+| ------------------- | ----------- | ------------------ |
+| `headerScrollUp`    |             | `CustomEvent<any>` |
+| `menuMobileToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies
 

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

@@ -46,6 +46,8 @@ export class SiteHeader {
   @State() isDesktopMenuOpen: boolean = false;
 
   @Event() headerScrollUp: EventEmitter;
+  @Event() menuMobileToggled: EventEmitter;
+
   private ro: ResizeObserver;
   private donateLink: DonateLink[];
   private menuLabels: ComponentLabels[];
@@ -61,6 +63,7 @@ export class SiteHeader {
   // Listener for toggling mobile menu panel on or off.
   @Listen('mobileMenuToggle') mobileMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
+    this.menuMobileToggled.emit();
   }
 
   @Listen('scroll', {target: 'window'})

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

@@ -161,16 +161,13 @@
       max-width: 100%;
       padding: 0 1rem 2rem;
       width: 100%;
+
       @include breakpoint($narrow) {
-        padding: 0 2rem 2rem;
-      }
-      @include breakpoint($extrawide) {
         max-width: 1216px;
-        padding: 0 2rem 2rem;
+        padding: 0 0 2rem;
       }
       @include breakpoint($xlarge) {
-        max-width: 1216px;
-        padding: 0 2rem 4rem;
+        padding: 0 0 4rem;
       }
     }
 
@@ -178,10 +175,11 @@
       background-color: transparent;
       border: none;
       position: absolute;
-      right: 0;
+      right: 1rem;
       top: 25px;
 
       @include breakpoint($narrow) {
+        right: 2rem;
         top: 36px;
       }
       @include breakpoint($xlarge) {
@@ -206,6 +204,17 @@
           letter-spacing: -0.56px;
         }
       }
+
+      &:focus,
+      &:hover {
+        cursor: pointer;
+        span {
+          color: var(--brand-main);
+        }
+        svg {
+          fill: var(--brand-main);
+        }
+      }
     }
 
     &__tools {

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

@@ -72,12 +72,21 @@ export class SiteSearch {
   @Listen('menuDesktopToggled', {target: 'document'})
   desktopMenuToggled() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
+  }
+
+  // CLose the search panel if user opens the mobile menu panel.
+  @Listen('menuMobileToggled', {target: 'document'})
+  mobileMenuToggled() {
+    this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   // CLose the search panel if user opens the language menu.
   @Listen('menuLanguageToggled', {target: 'document'})
   menuLanguageToggled() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   handleSearchPanelToggle(event) {
@@ -90,23 +99,52 @@ export class SiteSearch {
       this.searchPanelToggled.emit();
 
       let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
-      let rectHeader = hyHeader.getBoundingClientRect();
-
-      const headerHeight = `${rectHeader.bottom}px`;
+      const headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? `${hyHeader.offsetHeight}px`
+        : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`;
       const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
       searchPanel.style.top = headerHeight;
 
+      // Add shadow backdrop
+      let rect = searchPanel.getBoundingClientRect();
+
+      let shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? hyHeader.offsetHeight + rect.height
+        : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
+      this.showBackdropShadow('open', shadowTop);
+
       // Without setTimeout it will not focus the input because it hasn't rendered yet.
       setTimeout(() => {
         const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
         searchInput.focus();
       });
+    } else {
+      this.showBackdropShadow();
     }
     event.stopPropagation();
   }
 
+  showBackdropShadow(state = 'close', top = 0) {
+    let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+    let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
+
+    if (hyBackdropDiv) {
+      if (state === 'open') {
+        let me = window.outerHeight - top;
+        hyBackdropDiv.style.height = `${me}px`;
+        hyBackdropDiv.style.top = `${top}px`;
+        hyBackdropDiv.style.position = 'absolute';
+        hyBackdropDiv.classList.add('is-active');
+      } else {
+        hyBackdropDiv.removeAttribute('style');
+        hyBackdropDiv.classList.remove('is-active');
+      }
+    }
+  }
+
   handleSearchPanelClose() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   render() {