fix: add navigation

js/icons/close-icon.js

@@ -0,0 +1,65 @@
+/**
+ * Close Icon Web Component
+ * A reusable close/X icon element
+ */
+class CloseIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "24";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("close-icon", CloseIcon);