cloudflare/kumo
Publicmirrored fromhttps://github.com/cloudflare/kumoAvailable
packages/kumo-docs-astro/src/layouts/MainLayout.astro
49lines · modecode
| 1 | --- |
| 2 | import BaseLayout from "./BaseLayout.astro"; |
| 3 | import { SidebarNav } from "../components/SidebarNav"; |
| 4 | import { ThemeToggle } from "../components/ThemeToggle"; |
| 5 | |
| 6 | interface Props { |
| 7 | title?: string; |
| 8 | description?: string; |
| 9 | } |
| 10 | |
| 11 | const { title, description } = Astro.props; |
| 12 | const currentPath = Astro.url.pathname; |
| 13 | --- |
| 14 | |
| 15 | <BaseLayout title={title} description={description}> |
| 16 | <div class="isolate"> |
| 17 | <SidebarNav currentPath={currentPath} client:load /> |
| 18 | |
| 19 | <!-- Theme toggle: fixed in top right corner --> |
| 20 | <div |
| 21 | class="pointer-events-auto fixed top-0 right-2 z-50 flex h-[49px] items-center" |
| 22 | > |
| 23 | <ThemeToggle client:only="react" /> |
| 24 | </div> |
| 25 | |
| 26 | <!-- Main content area - margin controlled by CSS :has() based on sidebar state --> |
| 27 | <div |
| 28 | id="main-content" |
| 29 | class="main-content mt-[49px] md:mt-0 md:ml-12 h-screen overflow-y-auto overscroll-y-none transition-[margin] duration-300" |
| 30 | > |
| 31 | <slot /> |
| 32 | </div> |
| 33 | </div> |
| 34 | </BaseLayout> |
| 35 | |
| 36 | <style is:global> |
| 37 | /* Use CSS :has() to detect sidebar state and adjust main content margin */ |
| 38 | @media (min-width: 768px) { |
| 39 | /* When sidebar is open, add full margin */ |
| 40 | body:has(aside[data-sidebar-open="true"]) .main-content { |
| 41 | margin-left: 304px; /* 48px rail + 256px sidebar panel */ |
| 42 | } |
| 43 | |
| 44 | /* When sidebar is closed, only rail margin */ |
| 45 | body:has(aside[data-sidebar-open="false"]) .main-content { |
| 46 | margin-left: 48px; /* w-12 = 3rem = 48px */ |
| 47 | } |
| 48 | } |
| 49 | </style> |
| 50 | |