---
import '../styles/docs.css'
import CookieConsent from '../components/CookieConsent.astro'
import DocsMobileMenuToggle from '../components/DocsMobileMenuToggle.astro'
import Footer from '../components/Footer.astro'
import Header from '../components/Header.jsx'

const { hasSidebar } = Astro.locals.starlightRoute
---
<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;700&display=swap" rel="stylesheet" />
<div class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
  <Header client:load url={Astro.url} />
  <div class="page-content flex-1 container mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
      <div>
		{
			hasSidebar && (
				<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
					<DocsMobileMenuToggle />
					<div id="starlight__sidebar" class="sidebar-pane">
						<div class="sidebar-content sl-flex">
							<slot name="sidebar" />
						</div>
					</div>
				</nav>
			)
		}
      </div>
      <div class="col-span-4">
        <slot />
      </div>
    </div>
  </div>
  <Footer />
  <CookieConsent />
</div>

<style>
	@layer starlight.core {
		.page {
			flex-direction: column;
			min-height: 100vh;
		}

		.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;
			top: 0;
			width: 100%;
			background-color: var( --color-xahau-background);
			overflow-y: auto;
		}

		:global([aria-expanded='true']) ~ .sidebar-pane {
			--sl-sidebar-visibility: visible;
		}

		.sidebar-content {
			height: 100%;
			min-height: max-content;
			padding: 88px var(--sl-sidebar-pad-x) 0;
			flex-direction: column;
			gap: 1rem;
		}

		@media (min-width: 50rem) {
			.sidebar-content {
				padding: 1rem var(--sl-sidebar-pad-x) 0;
			}
		}

			@media (min-width: 50rem) {
			.sidebar-content::after {
				content: '';
				padding-bottom: 1px;
			}
		}

		.main-frame {
			padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
			padding-inline-start: var(--sl-content-inline-start);
		}

		@media (min-width: 50rem) {
			.sidebar-pane {
				--sl-sidebar-visibility: visible;
				position: relative
				border-inline-end: 1px solid var(--sl-color-hairline-shade);
			}
		}
	}
</style>
