hide backdrop when browser size is exiting fullscreen into <1200px screen size

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

@@ -20,6 +20,7 @@ export interface DesktopLinks {
 
 import {ColorVariant} from '../../../utils/utils';
 import {Component, h, Element, Prop, State, Watch, EventEmitter, Event, Listen} from '@stencil/core';
+import ResizeObserver from 'resize-observer-polyfill';
 
 @Component({
   tag: 'hy-desktop-menu-links',
@@ -47,6 +48,8 @@ export class HyDesktopMenuLinks {
   private _hoverTimer = null;
   private _fadeOutTimer = null;
 
+  private ro: ResizeObserver;
+
   @Watch('dataDesktopLinks')
   dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
     this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
@@ -56,6 +59,13 @@ export class HyDesktopMenuLinks {
     this.dataDesktopLinksWatcher(this.dataDesktopLinks);
   }
 
+  removeBackdropShadow(size: number) {
+    // Close backdrop shadow if the screen is < 1200px
+    if (size < 1200) {
+      this.showBackdropShadow();
+    }
+  }
+
   showBackdropShadow(state = 'close', top = 0) {
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -288,6 +298,14 @@ export class HyDesktopMenuLinks {
   }
 
   componentDidLoad() {
+    // Set the browser resize observer to gather information about browser width.
+    this.ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.removeBackdropShadow(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(document.body);
+
     let hyToolbar = document.querySelectorAll('#toolbar-administration')[0];
     if (hyToolbar) {
       this.hasToolbar = true;