.root {
z-index: 1;
pointer-events: none;
&::before {
@apply absolute w-full h-[200%] -translate-y-full;
content: "";
z-index: -1;
@media screen(lg) {
@apply hidden;
}
}
& ~ .root {
@apply !bg-transparent !border-0;
}
&.right {
@apply flex-row-reverse;
.sidebar {
transform: translateX(100vw);
right: 0;
left: auto;
@media screen(lg) {
transform: none;
}
}
}
}
.root ~ article {
@apply mt-16;
@media screen(lg) {
@apply ml-16 mr-0 mt-0;
}
&:last-child {
@media screen(lg) {
@apply mr-16;
}
}
}
article ~ .root {
@media screen(lg) {
@apply ml-16;
}
}
.toggle {
opacity: 0;
height: 0;
pointer-events: auto;
&:checked {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100vw;
height: 100vh;
& + .sidebar {
transform: translateX(0);
& + .backdrop {
opacity: 1;
@media screen(lg) {
display: none;
}
}
}
}
@media screen(lg) {
display: none;
}
}
.label {
@apply absolute inline-flex cursor-pointer pointer-events-auto;
& label {
@apply inline-flex items-center p-4 text-xs cursor-pointer;
& svg {
@apply inline-block h-4 w-4 mr-1;
}
}
@media screen(lg) {
display: none;
}
}
.sidebar {
transform: translateX(-100vw);
transition: transform 0.5s ease-in-out;
justify-items: left;
padding: 4rem 1rem 1rem 1rem;
width: 100%;
z-index: 10;
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
@media (prefers-reduced-motion) {
view-transition-name: none;
}
position: fixed;
max-width: min-content;
top: 0;
bottom: 0;
min-height: 100%;
box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.5);
@media screen(lg) {
position: sticky;
top: 0;
align-self: flex-start;
max-height: calc(100vh - 48px);
margin-top: -1rem;
height: auto;
box-shadow: none;
transform: none;
padding-top: 1rem;
padding-right: 2rem;
@apply !bg-transparent dark:!bg-transparent;
}
& + .backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
& nav {
display: flex;
flex-direction: column;
background: transparent;
& a {
white-space: normal;
float: left;
clear: left;
margin-right: auto;
&:first-child {
margin-right: 0;
}
}
}
}