100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
/**
|
|
* Site Footer Component
|
|
* Footer with configurable accordion sections and link columns
|
|
*/
|
|
class SiteFooter extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
background-color: var(--color-button-primary, #951D51);
|
|
}
|
|
|
|
.footer {
|
|
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-size: var(--font-size-2xl, 1.5rem);
|
|
font-weight: 400;
|
|
color: var(--color-text-inverse, #ffffff);
|
|
margin: 0;
|
|
padding-bottom: var(--spacing-lg, 1.5rem);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.accordion-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer-links {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
|
|
padding-top: var(--spacing-xl, 2rem);
|
|
}
|
|
|
|
.footer-link-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md, 1rem);
|
|
}
|
|
|
|
::slotted([slot="logo"]) {
|
|
font-size: var(--font-size-2xl, 1.5rem);
|
|
font-weight: 400;
|
|
color: var(--color-text-inverse, #ffffff) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
::slotted(footer-accordion-item) {
|
|
display: block;
|
|
}
|
|
|
|
::slotted([slot="links-left"]),
|
|
::slotted([slot="links-right"]) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md, 1rem);
|
|
}
|
|
|
|
/* Style for links inside the footer */
|
|
.links-wrapper ::slotted(a) {
|
|
color: var(--color-text-inverse, #ffffff) !important;
|
|
text-decoration: underline;
|
|
font-size: var(--font-size-base, 1rem);
|
|
}
|
|
</style>
|
|
<footer class="footer">
|
|
<h2 class="footer-logo">
|
|
<slot name="logo">MILINDA uitgevers</slot>
|
|
</h2>
|
|
<div class="accordion-section">
|
|
<slot name="accordion"></slot>
|
|
</div>
|
|
<div class="footer-links">
|
|
<div class="footer-link-column links-wrapper">
|
|
<slot name="links-left"></slot>
|
|
</div>
|
|
<div class="footer-link-column links-wrapper">
|
|
<slot name="links-right"></slot>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("site-footer", SiteFooter);
|