Create outsideClick functionality for mobile menu

src/components/navigation/menu/menu.tsx

@@ -197,9 +197,12 @@ export class Menu {
             {!this.isGroup && (
               <div class={'hy-link__donate'}>
                 {this.donateLink
-                  ? this.donateLink.map((i) => {
-                      return <a href={i.url}>{i.label}</a>;
-                    })
+                  ? this.donateLink.map((i) => (
+                      <a href={i.url}>
+                        <hy-icon icon={'hy-icon-heart-support'} fill={'currentColor'} size={16} />
+                        {i.label}
+                      </a>
+                    ))
                   : ''}
               </div>
             )}

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

@@ -239,6 +239,23 @@ export class SiteHeader {
     const logoColor = ColorVariant.black;
     const logoColorGroup = ColorVariant.white;
     let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
+
+    const toggleMenuMobileAndRemoveListener = () => {
+      window.removeEventListener('click', handleClickOutside);
+      this.mobileMenuToggle();
+    };
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const [targetElement] = event.composedPath() as HTMLElement[];
+      if (targetElement.classList.contains('hy-backdrop')) {
+        toggleMenuMobileAndRemoveListener();
+      }
+    };
+
+    if (this.isMenuOpen) {
+      window.addEventListener('click', handleClickOutside);
+    }
+
     switch (this.menuType) {
       case MenuType.desktop:
         // Larger than 1200px screens
@@ -433,7 +450,7 @@ export class SiteHeader {
                   {this.menuLabel}
                 </span>
                 <button
-                  onClick={() => this.mobileMenuToggle()}
+                  onClick={() => toggleMenuMobileAndRemoveListener()}
                   class={{
                     'hy-site-header__panel-toggle': true,
                     'is-open': this.isMenuOpen,
@@ -523,7 +540,7 @@ export class SiteHeader {
                   />
                 )}
                 <button
-                  onClick={() => this.mobileMenuToggle()}
+                  onClick={() => toggleMenuMobileAndRemoveListener()}
                   class={{
                     'hy-site-header__panel-toggle': true,
                     'is-open': this.isMenuOpen,