111 lines
3.3 KiB
JavaScript
111 lines
3.3 KiB
JavaScript
/**
|
|
* Top Bar Component
|
|
* Contains logo, menu icon, and cart icon
|
|
*/
|
|
class TopBar extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm, 0.5rem);
|
|
}
|
|
|
|
.icon-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--color-text, #1e293b);
|
|
transition: background-color var(--transition-fast, 150ms ease);
|
|
}
|
|
|
|
.icon-button:hover {
|
|
background-color: var(--color-background-tertiary, #f1f5f9);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</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>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('top-bar', TopBar);
|