fix: initial commit

2026-01-14 15:05:12 +01:00
commit dc06a33a72
16 changed files with 2621 additions and 0 deletions
--- a/js/components/horizontal-scroll-nav.js
+++ b/js/components/horizontal-scroll-nav.js
@@ -0,0 +1,113 @@
+/**
+ * Horizontal Scroll Nav Component
+ * Pill-style category buttons in a horizontal scroller
+ */
+class HorizontalScrollNav extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.categories = [
+      { id: 'all', label: 'All', active: true },
+      { id: 'fiction', label: 'Fiction', active: false },
+      { id: 'non-fiction', label: 'Non-Fiction', active: false },
+      { id: 'mystery', label: 'Mystery', active: false },
+      { id: 'romance', label: 'Romance', active: false },
+      { id: 'sci-fi', label: 'Sci-Fi', active: false },
+      { id: 'biography', label: 'Biography', active: false },
+      { id: 'history', label: 'History', active: false },
+    ];
+  }
+
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    const buttons = this.shadowRoot.querySelectorAll('.nav-pill');
+    buttons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        this.setActiveCategory(e.target.dataset.id);
+      });
+    });
+  }
+
+  setActiveCategory(id) {
+    this.categories = this.categories.map(cat => ({
+      ...cat,
+      active: cat.id === id
+    }));
+    this.render();
+    this.addEventListeners();
+    
+    // Dispatch custom event for parent components
+    this.dispatchEvent(new CustomEvent('category-change', {
+      detail: { categoryId: id },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .nav-container {
+          display: flex;
+          gap: var(--spacing-sm, 0.5rem);
+          overflow-x: auto;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          padding: var(--spacing-xs, 0.25rem) 0;
+        }
+
+        .nav-container::-webkit-scrollbar {
+          display: none;
+        }
+
+        .nav-pill {
+          flex-shrink: 0;
+          padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+          font-size: var(--font-size-sm, 0.875rem);
+          font-weight: var(--font-weight-medium, 500);
+          color: var(--color-text-light, #64748b);
+          background-color: var(--color-background-tertiary, #f1f5f9);
+          border: none;
+          border-radius: var(--radius-full, 9999px);
+          cursor: pointer;
+          transition: all var(--transition-fast, 150ms ease);
+          white-space: nowrap;
+        }
+
+        .nav-pill:hover {
+          background-color: var(--color-border, #e2e8f0);
+        }
+
+        .nav-pill.active {
+          color: var(--color-text-inverse, #ffffff);
+          background-color: var(--color-primary, #2563eb);
+        }
+
+        .nav-pill.active:hover {
+          background-color: var(--color-primary-dark, #1d4ed8);
+        }
+      </style>
+      <nav class="nav-container" role="navigation" aria-label="Book categories">
+        ${this.categories.map(cat => `
+          <button 
+            class="nav-pill ${cat.active ? 'active' : ''}" 
+            data-id="${cat.id}"
+            ${cat.active ? 'aria-current="true"' : ''}
+          >
+            ${cat.label}
+          </button>
+        `).join('')}
+      </nav>
+    `;
+  }
+}
+
+customElements.define('horizontal-scroll-nav', HorizontalScrollNav);