mirror of
https://github.com/sern-handler/website
synced 2026-06-16 12:52:20 +00:00
57 lines
1.0 KiB
Plaintext
57 lines
1.0 KiB
Plaintext
---
|
|
import type { Props } from '../props';
|
|
---
|
|
|
|
<div class="lg:sl-flex">
|
|
{
|
|
Astro.props.toc && (
|
|
<aside class="right-sidebar-container">
|
|
<div class="right-sidebar">
|
|
<slot name="right-sidebar" />
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
<div class="main-pane"><slot /></div>
|
|
</div>
|
|
|
|
<style>
|
|
.main-pane {
|
|
isolation: isolate;
|
|
}
|
|
|
|
@media (min-width: 72rem) {
|
|
.right-sidebar-container {
|
|
order: 2;
|
|
position: relative;
|
|
width: calc(
|
|
var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
|
|
);
|
|
}
|
|
|
|
.right-sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
border-inline-start: 1px solid var(--sl-color-gray-6);
|
|
padding-top: var(--sl-nav-height);
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.main-pane {
|
|
width: 100%;
|
|
}
|
|
|
|
:global([data-has-sidebar][data-has-toc]) .main-pane {
|
|
--sl-content-margin-inline: auto 0;
|
|
|
|
order: 1;
|
|
width: calc(
|
|
var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
|
|
);
|
|
}
|
|
}
|
|
</style>
|