fix: update header content to be rendered from index directly

2026-01-14 15:38:21 +01:00
parent dc06a33a72
commit 6816650ea5
7 changed files with 678 additions and 390 deletions
--- a/js/components/horizontal-scroll-nav.js
+++ b/js/components/horizontal-scroll-nav.js
@@ -5,16 +5,16 @@
 class HorizontalScrollNav extends HTMLElement {
  constructor() {
    super();
-    this.attachShadow({ mode: 'open' });
+    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 },
+      { 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 },
    ];
  }

@@ -24,28 +24,30 @@ class HorizontalScrollNav extends HTMLElement {
  }

  addEventListeners() {
-    const buttons = this.shadowRoot.querySelectorAll('.nav-pill');
-    buttons.forEach(button => {
-      button.addEventListener('click', (e) => {
+    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 => ({
+    this.categories = this.categories.map((cat) => ({
      ...cat,
-      active: cat.id === id
+      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
-    }));
+    this.dispatchEvent(
+      new CustomEvent("category-change", {
+        detail: { categoryId: id },
+        bubbles: true,
+        composed: true,
+      })
+    );
  }

  render() {
@@ -61,7 +63,7 @@ class HorizontalScrollNav extends HTMLElement {
          overflow-x: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
-          padding: var(--spacing-xs, 0.25rem) 0;
+          padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
        }

        .nav-container::-webkit-scrollbar {
@@ -96,18 +98,22 @@ class HorizontalScrollNav extends HTMLElement {
        }
      </style>
      <nav class="nav-container" role="navigation" aria-label="Book categories">
-        ${this.categories.map(cat => `
+        ${this.categories
+          .map(
+            (cat) => `
          <button 
-            class="nav-pill ${cat.active ? 'active' : ''}" 
+            class="nav-pill ${cat.active ? "active" : ""}" 
            data-id="${cat.id}"
-            ${cat.active ? 'aria-current="true"' : ''}
+            ${cat.active ? 'aria-current="true"' : ""}
          >
            ${cat.label}
          </button>
-        `).join('')}
+        `
+          )
+          .join("")}
      </nav>
    `;
  }
 }

-customElements.define('horizontal-scroll-nav', HorizontalScrollNav);
+customElements.define("horizontal-scroll-nav", HorizontalScrollNav);
--- a/js/components/search-bar.js
+++ b/js/components/search-bar.js
@@ -5,7 +5,7 @@
 class SearchBar extends HTMLElement {
  constructor() {
    super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
@@ -14,24 +14,28 @@ class SearchBar extends HTMLElement {
  }

  addEventListeners() {
-    const input = this.shadowRoot.querySelector('.search-input');
-    const form = this.shadowRoot.querySelector('.search-form');
+    const input = this.shadowRoot.querySelector(".search-input");
+    const form = this.shadowRoot.querySelector(".search-form");

-    form.addEventListener('submit', (e) => {
+    form.addEventListener("submit", (e) => {
      e.preventDefault();
-      this.dispatchEvent(new CustomEvent('search', {
-        detail: { query: input.value },
-        bubbles: true,
-        composed: true
-      }));
+      this.dispatchEvent(
+        new CustomEvent("search", {
+          detail: { query: input.value },
+          bubbles: true,
+          composed: true,
+        })
+      );
    });

-    input.addEventListener('input', (e) => {
-      this.dispatchEvent(new CustomEvent('search-input', {
-        detail: { query: e.target.value },
-        bubbles: true,
-        composed: true
-      }));
+    input.addEventListener("input", (e) => {
+      this.dispatchEvent(
+        new CustomEvent("search-input", {
+          detail: { query: e.target.value },
+          bubbles: true,
+          composed: true,
+        })
+      );
    });
  }

@@ -46,6 +50,8 @@ class SearchBar extends HTMLElement {
          display: flex;
          align-items: center;
          position: relative;
+          padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem);
+          background-color: #951D51;
        }

        .search-icon {
@@ -95,4 +101,4 @@ class SearchBar extends HTMLElement {
  }
 }

-customElements.define('search-bar', SearchBar);
+customElements.define("search-bar", SearchBar);
--- a/js/components/site-header.js
+++ b/js/components/site-header.js
@@ -5,7 +5,7 @@
 class SiteHeader extends HTMLElement {
  constructor() {
    super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
@@ -27,7 +27,6 @@ class SiteHeader extends HTMLElement {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-sm, 0.5rem);
-          padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
          border-bottom: 1px solid var(--color-border, #e2e8f0);
        }
      </style>
@@ -38,4 +37,4 @@ class SiteHeader extends HTMLElement {
  }
 }

-customElements.define('site-header', SiteHeader);
+customElements.define("site-header", SiteHeader);
--- a/js/components/top-bar.js
+++ b/js/components/top-bar.js
@@ -1,11 +1,12 @@
 /**
 * Top Bar Component
- * Contains logo, menu icon, and cart icon
+ * Contains menu icon, logo, and action buttons (profile, basket)
+ * Uses slots for content customization from index.html
 */
 class TopBar extends HTMLElement {
  constructor() {
    super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
@@ -22,89 +23,67 @@ class TopBar extends HTMLElement {
        .top-bar {
          display: flex;
          align-items: center;
-          justify-content: space-between;
-          height: 44px;
+          height: 80px;
+          padding: 0 16px;
+          background-color: #951D51;
        }

-        .logo {
-          font-size: var(--font-size-xl, 1.25rem);
-          font-weight: var(--font-weight-bold, 700);
-          color: var(--color-text, #1e293b);
-          text-decoration: none;
-        }
-
-        .actions {
+        .left-section {
          display: flex;
          align-items: center;
-          gap: var(--spacing-sm, 0.5rem);
+          gap: 16px;
        }

-        .icon-button {
+        .spacer {
+          flex: 1;
+        }
+
+        .right-section {
+          display: flex;
+          align-items: center;
+        }
+
+        /* Styles for slotted elements */
+        ::slotted([slot="menu-button"]),
+        ::slotted(.icon-button) {
          display: flex;
          align-items: center;
          justify-content: center;
-          width: 40px;
-          height: 40px;
-          border-radius: var(--radius-md, 0.5rem);
+          width: 32px;
+          height: 32px;
          background: transparent;
          border: none;
          cursor: pointer;
-          color: var(--color-text, #1e293b);
-          transition: background-color var(--transition-fast, 150ms ease);
+          padding: 0;
        }

-        .icon-button:hover {
-          background-color: var(--color-background-tertiary, #f1f5f9);
+        ::slotted([slot="menu-button"] svg),
+        ::slotted(.icon-button svg) {
+          width: 32px;
+          height: 32px;
+          color: #ffffff;
        }

-        .icon-button:active {
-          background-color: var(--color-border, #e2e8f0);
-        }
-
-        .icon-button svg {
-          width: 24px;
-          height: 24px;
-        }
-
-        .cart-badge {
-          position: relative;
-        }
-
-        .badge {
-          position: absolute;
-          top: 4px;
-          right: 4px;
-          min-width: 18px;
-          height: 18px;
-          padding: 0 5px;
-          font-size: var(--font-size-xs, 0.75rem);
-          font-weight: var(--font-weight-semibold, 600);
-          color: var(--color-text-inverse, #ffffff);
-          background-color: var(--color-primary, #2563eb);
-          border-radius: var(--radius-full, 9999px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
+        ::slotted([slot="logo"]) {
+          font-family: 'Outfit', system-ui, sans-serif;
+          font-size: 1.25rem;
+          font-weight: 700;
+          color: #ffffff;
+          text-decoration: none;
        }
      </style>
      <div class="top-bar">
-        <a href="index.html" class="logo">BookStore</a>
-        <div class="actions">
-          <button class="icon-button" aria-label="Menu">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-            </svg>
-          </button>
-          <button class="icon-button cart-badge" aria-label="Shopping cart">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
-            </svg>
-            <span class="badge">2</span>
-          </button>
+        <div class="left-section">
+          <slot name="menu-button"></slot>
+          <slot name="logo"></slot>
+        </div>
+        <div class="spacer"></div>
+        <div class="right-section">
+          <slot name="actions"></slot>
        </div>
      </div>
    `;
  }
 }

-customElements.define('top-bar', TopBar);
+customElements.define("top-bar", TopBar);