chore(mainnav): refactor code to use available sgds event to prevent creating redundant events

Author: tong.hau

src/components/Mainnav/sgds-mainnav-dropdown.ts

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { consume } from "@lit/context";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { SgdsMainnav } from "./sgds-mainnav";
 import { classMap } from "lit/directives/class-map.js";
 import genId from "../../utils/generateId";
 import dropdownStyle from "../Dropdown/dropdown.css";
@@ -71,16 +72,20 @@ export class SgdsMainnavDropdown extends SgdsElement {
 
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("close-dropdown-menu", () => {
-      this._resetDropdownMenu();
-      this._hideDropdownMenuItems();
+    document.addEventListener("sgds-after-hide", (e: CustomEvent) => {
+      const target = e.target as HTMLElement;
+      const mainnav = target.closest("sgds-mainnav") as SgdsMainnav;
+      if (mainnav) {
+        this._resetDropdownMenu();
+        this._hideDropdownMenuItems();
+      }
     });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     // Clean up the event listener when the element is removed from the DOM
-    document.removeEventListener("close-dropdown-menu", () => {
+    document.removeEventListener("sgds-after-hide", () => {
       this._resetDropdownMenu();
       this._hideDropdownMenuItems();
     });
@@ -120,8 +125,10 @@ export class SgdsMainnavDropdown extends SgdsElement {
         link.setAttribute("href", "javascript:void(0)");
         link.setAttribute("tabindex", "-1");
       } else {
-        link.addEventListener("click", () => {
-          this.emit("sgds-mainnav-close");
+        link.addEventListener("click", (e: Event) => {
+          const target = e.target as HTMLElement;
+          const mainnav = target.closest("sgds-mainnav") as SgdsMainnav;
+          mainnav.hide();
         });
       }
     });

src/components/Mainnav/sgds-mainnav-item.ts

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import { property } from "lit/decorators.js";
+import { SgdsMainnav } from "./sgds-mainnav";
 import { watch } from "../../utils/watch";
 import SgdsElement from "../../base/sgds-element";
 import mainnavItemStyle from "./mainnav-item.css";
@@ -60,8 +61,10 @@ export class SgdsMainnavItem extends SgdsElement {
         return;
       }
 
-      anchor.addEventListener("click", () => {
-        this.emit("sgds-mainnav-close");
+      anchor.addEventListener("click", (e: Event) => {
+        const target = e.target as HTMLElement;
+        const mainnav = target.closest("sgds-mainnav") as SgdsMainnav;
+        mainnav.hide();
       });
     }
   }

src/components/Mainnav/sgds-mainnav.ts

@@ -128,23 +128,14 @@ export class SgdsMainnav extends SgdsElement {
 
   connectedCallback() {
     super.connectedCallback();
+
     this.addEventListener("click", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));
-    this.addEventListener("sgds-mainnav-close", () => {
-      if (this.breakpointReached) {
-        this.hide();
-      }
-    });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
 
     this.removeEventListener("click", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));
-    this.removeEventListener("sgds-mainnav-close", () => {
-      if (this.breakpointReached) {
-        this.hide();
-      }
-    });
   }
 
   firstUpdated() {
@@ -174,8 +165,6 @@ export class SgdsMainnav extends SgdsElement {
       document.querySelector("body").style.overflow = "hidden";
       this.show();
     }
-
-    this.header.focus();
   }
 
   private async _handleMobileNav() {
@@ -234,6 +223,7 @@ export class SgdsMainnav extends SgdsElement {
       // Show
       this._animateToShow();
     } else {
+      this.header.focus();
       // Hide
       this._animateToHide();
     }
@@ -256,9 +246,6 @@ export class SgdsMainnav extends SgdsElement {
 
     this.expanded = false;
     document.querySelector("body").style.removeProperty("overflow");
-    setTimeout(() => {
-      this.emit("close-dropdown-menu");
-    }, 200);
 
     return waitForEvent(this, "sgds-after-hide");
   }