rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update header content to be rendered from index directly

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

105
js/components/top-bar.js
View File

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