From f7be64dbba83b3693a1415269771f8471a9af714 Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Thu, 15 Jan 2026 07:54:53 +0100 Subject: [PATCH 1/4] fix: add search input --- css/styles.css | 1 + index.html | 2 +- js/components/horizontal-scroll-nav.js | 32 ++-- js/components/search-bar.js | 242 +++++++++++++++++++++---- js/components/site-header.js | 1 - js/icons/index.js | 9 + js/icons/menu.js | 31 ++++ js/icons/mic.js | 31 ++++ js/icons/search.js | 30 +++ js/icons/shopping-bag.js | 31 ++++ js/icons/user.js | 30 +++ 11 files changed, 394 insertions(+), 46 deletions(-) create mode 100644 js/icons/index.js create mode 100644 js/icons/menu.js create mode 100644 js/icons/mic.js create mode 100644 js/icons/search.js create mode 100644 js/icons/shopping-bag.js create mode 100644 js/icons/user.js diff --git a/css/styles.css b/css/styles.css index 1c4aa15..288ee32 100644 --- a/css/styles.css +++ b/css/styles.css @@ -277,6 +277,7 @@ top-bar .logo { top-bar .actions { display: flex; align-items: center; + gap: var(--spacing-md); } /* ========================================================================== diff --git a/index.html b/index.html index 180b4d1..8b988ca 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ diff --git a/js/components/horizontal-scroll-nav.js b/js/components/horizontal-scroll-nav.js index 08a731c..a5190af 100644 --- a/js/components/horizontal-scroll-nav.js +++ b/js/components/horizontal-scroll-nav.js @@ -59,11 +59,13 @@ class HorizontalScrollNav extends HTMLElement { .nav-container { display: flex; - gap: var(--spacing-sm, 0.5rem); + align-items: center; + height: 80px; + gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; - padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem); + padding: 0 16px; } .nav-container::-webkit-scrollbar { @@ -72,29 +74,37 @@ class HorizontalScrollNav extends HTMLElement { .nav-pill { flex-shrink: 0; - padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); - font-size: var(--font-size-sm, 0.875rem); + height: 32px; + padding: 0; + font-size: 16px; font-weight: var(--font-weight-medium, 500); - color: var(--color-text-light, #64748b); - background-color: var(--color-background-tertiary, #f1f5f9); + line-height: 1.5; + color: #000000; + background-color: transparent; border: none; - border-radius: var(--radius-full, 9999px); + border-radius: 0; cursor: pointer; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; + text-decoration: underline; + display: flex; + align-items: center; } .nav-pill:hover { - background-color: var(--color-border, #e2e8f0); + color: #333333; } .nav-pill.active { - color: var(--color-text-inverse, #ffffff); - background-color: var(--color-primary, #2563eb); + color: #ffffff; + background-color: #951D51; + text-decoration: none; + border-radius: 9999px; + padding: 0 16px; } .nav-pill.active:hover { - background-color: var(--color-primary-dark, #1d4ed8); + background-color: #7a1843; }