Something went wrong. Try again.
Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
Something went wrong. Try again.
3.5 kB · 139 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140---import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
const { hasSidebar } = Astro.locals.starlightRoute;---
<div class="page sl-flex"> <header class="header"><slot name="header" /></header> <div class="main-frame"> <div class="frame-content"> { hasSidebar && ( <nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')} transition:persist transition:name="sidebar"> <MobileMenuToggle /> <div id="starlight__sidebar" class="sidebar-pane"> <div class="sidebar-content sl-flex"> <slot name="sidebar" /> </div> </div> </nav> ) } <div class="content-col"><slot /></div> </div> </div></div>
<style> @layer starlight.core { .page { flex-direction: column; min-height: 100vh; }
.header { z-index: var(--sl-z-index-navbar); position: fixed; inset-inline-start: 0; inset-block-start: 0; width: 100%; height: var(--sl-nav-height); border-bottom: 1px solid var(--sl-color-hairline-shade); padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x); background-color: var(--sl-color-bg-nav); }
/* Mobile: show hamburger button space */ :global([data-has-sidebar]) .header { padding-inline-end: calc( var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size) ); }
.main-frame { padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height)); flex: 1; }
.frame-content { display: flex; height: 100%; max-width: calc(var(--sl-content-width) + 2 * var(--sl-sidebar-width)); margin-inline: auto; width: 100%; }
/* ── Mobile: sidebar is a full-screen overlay ── */ .sidebar-pane { visibility: var(--sl-sidebar-visibility, hidden); position: fixed; z-index: var(--sl-z-index-menu); inset-block: var(--sl-nav-height) 0; inset-inline-start: 0; width: 100%; background-color: var(--sl-color-black); overflow-y: auto; }
:global([aria-expanded='true']) ~ .sidebar-pane { --sl-sidebar-visibility: visible; }
.sidebar-content { height: 100%; min-height: max-content; padding: 1rem var(--sl-sidebar-pad-x) 0; flex-direction: column; gap: 1rem; }
.content-col { flex: 1; min-width: 0; }
/* ── Desktop: sidebar is in-flow and sticky ── */ @media (min-width: 50rem) { :global([data-has-sidebar]) .header { padding-inline-end: var(--sl-nav-pad-x); }
.sidebar { width: var(--sl-sidebar-width); flex-shrink: 0; position: sticky; top: var(--sl-nav-height); height: calc(100vh - var(--sl-nav-height)); overflow-y: auto; }
.sidebar-pane { --sl-sidebar-visibility: visible; position: relative; inset: unset; width: 100%; height: 100%; background-color: var(--sl-color-bg-sidebar); overflow-y: auto; z-index: 1; } } }</style>
<script> // Since the sidebar is persisted across view transitions, Astro won't // update aria-current automatically. Update it manually after each swap. document.addEventListener('astro:after-swap', () => { const currentPath = window.location.pathname; document.querySelectorAll('#starlight__sidebar a').forEach((link) => { const linkPath = new URL(link.href, window.location.origin).pathname; if (linkPath === currentPath) { link.setAttribute('aria-current', 'page'); } else { link.removeAttribute('aria-current'); } }); });</script>