90 lines
2.0 KiB
JavaScript
90 lines
2.0 KiB
JavaScript
/**
|
|
* Top Bar Component
|
|
* 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" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 80px;
|
|
padding: 0 16px;
|
|
background-color: #951D51;
|
|
}
|
|
|
|
.left-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.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: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
::slotted([slot="menu-button"] svg),
|
|
::slotted(.icon-button svg) {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
::slotted([slot="logo"]) {
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-xl, 1.25rem);
|
|
font-weight: var(--font-weight-bold, 700);
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
<div class="top-bar">
|
|
<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);
|