enhancement/issue 48 light DOM header with popover mobile menu

src/components/header/header.js

@@ -1,136 +1,84 @@
-import sheet from "./header.css" with { type: "css" };
 import discordIcon from "../../assets/discord.svg?type=raw";
 import githubIcon from "../../assets/github.svg?type=raw";
 import twitterIcon from "../../assets/twitter-logo.svg?type=raw";
 import mobileMenuIcon from "../../assets/tile.svg?type=raw";
 import greenwoodLogo from "../../assets/greenwood-logo-full.svg?type=raw";
+import styles from "./header.module.css";
 
 export default class Header extends HTMLElement {
-  constructor() {
-    super();
-    this.isMobileMenuActive = false;
-  }
-
   connectedCallback() {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-      this.shadowRoot.innerHTML = `
-        <header>
-          <a href="/" title="Greenwood Home Page" class="logo-link">
-            <div class="logo-bar">
-              ${greenwoodLogo}
-            </div>
-          </a>
-
-          <nav class="nav-bar">
-            <ul class="nav-bar-menu">
-              <li class="nav-bar-menu-item">
+    this.innerHTML = `
+      <header class="${styles.container}">
+        <a href="/" title="Greenwood Home Page" class="${styles.logoLink}">
+          ${greenwoodLogo}
+        </a>
+
+        <div class="${styles.navBar}">
+          <nav role="navigation" aria-label="Main">
+            <ul class="${styles.navBarMenu}">
+              <li class="${styles.navBarMenuItem}">
                 <a href="/docs/" title="Documentation">Docs</a>
               </li>
-              <li class="nav-bar-menu-item">
+              <li class="${styles.navBarMenuItem}">
                 <a href="/guides/" title="Guides">Guides</a>
               </li>
-              <li class="nav-bar-menu-item">
+              <li class="${styles.navBarMenuItem}">
                 <a href="/blog/" title="Blog">Blog</a>
               </li>
             </ul>
+          </nav>
 
-            <ul class="social-tray">
-              <li class="social-icon">
+          <nav role="navigation" aria-label="Social">
+            <ul class="${styles.socialTray}">
+              <li class="${styles.socialIcon}">
                 <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
                   ${githubIcon}
                 </a>
               </li>
 
-              <li class="social-icon">
+              <li class="${styles.socialIcon}">
                 <a href="https://discord.gg/bsy9jvWh" title="Discord">
                   ${discordIcon}
                 </a>
               </li>
 
-              <li class="social-icon">
+              <li class="${styles.socialIcon}">
                 <a href="https://twitter.com/PrjEvergreen" title="Twitter">
                   ${twitterIcon}
                 </a>
               </li>
             </ul>
+          </nav>
 
-            <div class="mobile-menu">
-              ${mobileMenuIcon}
-            </div>
+          <button class="${styles.mobileMenuIcon}" popovertarget="mobile-menu" aria-label="Mobile Menu Icon Button">
+            ${mobileMenuIcon}
+          </button>
+        </div>
+
+        <div id="mobile-menu" popover="manual">
+          <div class="${styles.mobileMenuBackdrop}">
+
+            <button class="${styles.mobileMenuCloseButton}" popovertarget="mobile-menu" popovertargetaction="hide" aria-label="Mobile Menu Close Button">
+              &times;
+            </button>
 
-            <nav class="nav-bar-mobile">
-              <ul class="mobile-menu-items">
-                <li class="nav-bar-menu-item">
+            <nav role="navigation" aria-label="Mobile">
+              <ul class="${styles.mobileMenuList}">
+                <li class="${styles.mobileMenuListItem}">
                   <a href="/docs/" title="Documentation">Docs</a>
                 </li>
-                <li class="nav-bar-menu-item">
+                <li class="${styles.mobileMenuListItem}">
                   <a href="/guides/" title="Guides">Guides</a>
                 </li>
-                <li class="nav-bar-menu-item">
+                <li class="${styles.mobileMenuListItem}">
                   <a href="/blog/" title="Blog">Blog</a>
                 </li>
               </ul>
             </nav>
-          </nav>
-        </header>
-
-        <!-- Mobile menu Overlay -->
-        <div class="overlay"></div>
-
-        <!-- Close button -->
-        <button class="close-button">&times;</button>
-      `;
-    }
-
-    this.shadowRoot.adoptedStyleSheets = [sheet];
-
-    this.mobileMenu = this.shadowRoot?.querySelector(".mobile-menu");
-    this.mobileMenuItems = this.shadowRoot?.querySelector(".mobile-menu-items");
-    this.overlay = this.shadowRoot?.querySelector(".overlay");
-    this.closeButton = this.shadowRoot?.querySelector(".close-button");
-    this.socialTray = this.shadowRoot?.querySelector(".social-tray");
-
-    this.mobileMenu?.addEventListener("click", this.toggleMobileMenu.bind(this));
-    this.closeButton?.addEventListener("click", this.toggleMobileMenu.bind(this));
-    globalThis.addEventListener("resize", this.resizeMobileMenu.bind(this));
-
-    this.toggleMobileMenu();
-    this.resizeMobileMenu();
-  }
-
-  toggleMobileMenu() {
-    if (
-      this.mobileMenuItems &&
-      this.overlay &&
-      this.closeButton &&
-      this.mobileMenu &&
-      this.socialTray
-    ) {
-      this.isMobileMenuActive = !this.isMobileMenuActive;
-      this.mobileMenuItems.classList.toggle("active", this.isMobileMenuActive);
-      this.overlay.classList.toggle("active", this.isMobileMenuActive);
-      this.closeButton.style.display = this.isMobileMenuActive ? "block" : "none";
-      this.mobileMenu.style.display = this.isMobileMenuActive ? "none" : "block";
-      this.socialTray.style.display = this.isMobileMenuActive ? "none" : "flex";
-    }
-  }
-
-  resizeMobileMenu() {
-    if (this.mobileMenu && this.socialTray) {
-      const isMobileView = globalThis?.innerWidth < 600;
-
-      if (isMobileView) {
-        this.mobileMenu.style.display = this.isMobileMenuActive ? "none" : "block";
-        this.socialTray.style.display = this.isMobileMenuActive ? "none" : "flex";
-      } else {
-        if (this.isMobileMenuActive) {
-          this.toggleMobileMenu();
-        }
-        this.mobileMenu.style.display = "none";
-        this.socialTray.style.display = "flex";
-      }
-    }
+          </div>
+        </div>
+      </header>
+    `;
   }
 }