fix: add footer

2026-01-15 16:01:03 +01:00
parent 1a6b47c8d3
commit ac10ab8f4b
6 changed files with 260 additions and 69 deletions
--- a/js/components/footer-accordion-item.js
+++ b/js/components/footer-accordion-item.js
@@ -0,0 +1,115 @@
+/**
+ * Footer Accordion Item Component
+ * Expandable accordion item for footer navigation
+ */
+class FooterAccordionItem extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._expanded = false;
+  }
+
+  static get observedAttributes() {
+    return ["title"];
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    const header = this.shadowRoot.querySelector(".accordion-header");
+    if (header) {
+      header.addEventListener("click", () => this.toggle());
+    }
+  }
+
+  toggle() {
+    this._expanded = !this._expanded;
+    const content = this.shadowRoot.querySelector(".accordion-content");
+    const icon = this.shadowRoot.querySelector(".accordion-icon");
+    
+    if (content) {
+      content.classList.toggle("expanded", this._expanded);
+    }
+    if (icon) {
+      icon.classList.toggle("rotated", this._expanded);
+    }
+  }
+
+  render() {
+    const title = this.getAttribute("title") || "";
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .accordion-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--spacing-lg, 1.5rem) 0;
+          cursor: pointer;
+          user-select: none;
+        }
+
+        .accordion-header:hover {
+          opacity: 0.9;
+        }
+
+        .accordion-title {
+          font-size: var(--font-size-base, 1rem);
+          font-weight: 400;
+          color: var(--color-text-inverse, #ffffff);
+          margin: 0;
+        }
+
+        .accordion-icon {
+          width: 24px;
+          height: 24px;
+          color: var(--color-text-inverse, #ffffff);
+          transition: transform var(--transition-fast, 150ms ease);
+        }
+
+        .accordion-icon.rotated {
+          transform: rotate(180deg);
+        }
+
+        .accordion-content {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height var(--transition-normal, 300ms ease), padding var(--transition-normal, 300ms ease);
+        }
+
+        .accordion-content.expanded {
+          max-height: 500px;
+          padding-bottom: var(--spacing-lg, 1.5rem);
+        }
+
+        ::slotted(*) {
+          color: var(--color-text-inverse, #ffffff);
+        }
+      </style>
+      <div class="accordion-header">
+        <h3 class="accordion-title">${title}</h3>
+        <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+      <div class="accordion-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("footer-accordion-item", FooterAccordionItem);