.app-with-sidebar {
display: grid;
block-size: 100vh;
grid-template-columns: auto 1fr auto;
inline-size: 100%;
}
.app-body {
display: flex;
overflow: auto;
flex-direction: column;
}
.app__header {
position: sticky;
z-index: var(--op-z-index-header);
flex-grow: 0;
flex-shrink: 0;
inset-block-start: 0;
}
.app__content {
flex-grow: 1;
padding: 0 var(--op-space-large);
margin: 0 auto;
inline-size: 100%;
max-inline-size: var(--op-breakpoint-medium);
}
.app__content-no-margin {
flex-grow: 1;
padding: 0 var(--op-space-large);
inline-size: 100%;
overflow-y: auto;
}
.app__footer {
position: sticky;
z-index: var(--op-z-index-footer);
flex-grow: 0;
flex-shrink: 0;
inset-block-end: 0;
}
/*
...
*/
:root:has(.op-page) {
/* Reset existing Optics layout */
overflow: unset;
body {
overflow: unset;
}
/* New Layout */
html,
body {
padding: 0;
margin: 0;
block-size: 100%;
min-block-size: 100%;
}
}
.op-page {
display: grid;
grid-template-areas: 'sidebar-left main sidebar-right';
grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
min-block-size: 100dvh;
.op-page__sidebar {
grid-area: sidebar-left;
&.op-page__sidebar--right {
grid-area: sidebar-right;
}
}
.op-page__main {
grid-area: main;
}
.op-page__sidebar {
position: sticky;
z-index: var(--op-z-index-sidebar);
block-size: 100dvh;
inset-block-start: 0;
max-block-size: 100dvh;
> * {
block-size: 100%;
}
}
.op-page__main {
display: grid;
grid-template-areas:
'main-header'
'main-content'
'main-footer';
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
min-block-size: 100%;
.op-page__main-header {
grid-area: main-header;
}
.op-page__main-content {
grid-area: main-content;
}
.op-page__main-footer {
grid-area: main-footer;
}
.op-page__main-header {
position: sticky;
z-index: var(--op-z-index-header);
inset-block-start: 0;
}
.op-page__main-content {
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--op-breakpoint-medium);
padding-block: var(--op-space-medium);
padding-inline: var(--op-space-large);
}
.op-page__main-footer {
position: sticky;
z-index: var(--op-z-index-footer);
inset-block-end: 0;
}
}
}