fix: update header content to be rendered from index directly

This commit is contained in:
Tim Rijkse
2026-01-14 15:38:21 +01:00
parent dc06a33a72
commit 6816650ea5
7 changed files with 678 additions and 390 deletions

View File

@@ -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);