Skip to content

Instantly share code, notes, and snippets.

@macdonst
Created February 9, 2024 14:05
Show Gist options
  • Save macdonst/9c23f95610239cb02f07e9354a8abace to your computer and use it in GitHub Desktop.
Save macdonst/9c23f95610239cb02f07e9354a8abace to your computer and use it in GitHub Desktop.
Slotted Layout Component
export default function PageLaout ({ html, state }) {
const { attrs = {} } = state
const { mobileBreakpoint = '40rem', desktopBreakpoint = '60rem' } = attrs
return html`
<style>
:host {
min-height: 100vh;
display: grid;
grid-template-areas:
'header'
'left-sidebar'
'main'
'footer';
grid-template-rows: min-content min-content 1fr min-content;
}
::slotted([slot='header']) {
grid-area: header;
}
::slotted([slot='left-sidebar']) {
grid-area: left-sidebar;
}
::slotted([slot='main']) {
grid-area: main;
}
::slotted([slot='right-sidebar']) {
grid-area: right-sidebar;
display: none;
}
::slotted([slot='footer']) {
grid-area: footer;
}
@media (min-width: ${mobileBreakpoint}) {
:host {
grid-template:
'header header' min-content
'left-sidebar main ' 1fr
'footer footer' min-content
/ minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr);
}
}
@media (min-width: ${desktopBreakpoint}) {
:host {
grid-template:
'header header header' min-content
'left-sidebar main right-sidebar' 1fr
'footer footer footer' min-content
/ minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr) minmax(auto, var(--layout-max-sidebar-width, 16rem));
}
::slotted([slot='right-sidebar']) {
grid-area: right-sidebar;
display: block;
}
}
</style>
<slot name="header"></slot>
<slot name="left-sidebar"></slot>
<slot name="main"></slot>
<slot name="right-sidebar"></slot>
<slot name="footer"></slot>
`
}
<page-layout mobileBreakpoint="40rem" desktopBreakpoint="60rem">
<div slot="header" style="background-color: red">Header</div>
<div slot="left-sidebar" style="background-color: orange">Left Sidebar</div>
<div slot="main" style="background-color: green">Content</div>
<div slot="right-sidebar" style="background-color: blue">Right Sidebar</div>
<div slot="footer" style="background-color: purple">Footer</div>
</page-layout>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment