Collapsible sections
The grouped layout with sections that open and close: each section is a
collapsible group whose label is what the user clicks, with a
chevron that turns when it opens. Every section starts open here; a long sidebar can open only the current page’s
section with th:open="${#slNav.current('/build')}". At the top, a version switcher and a search field. On a desktop
the trigger moves the sidebar out of view; on a phone it opens the same sidebar as a panel. Switch the preview to
Phone to see it.
Rendered HTML
<a class="skip-link" href="#main">Skip to main content</a><div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar" popover aria-label="Main"> <div class="sidebar-header"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <button class="sidebar-menu-button dropdown-menu-trigger" type="button" data-size="lg" id="version-switcher-trigger" popovertarget="version-switcher" aria-haspopup="menu"> <span class="app-logo"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> </span> <span class="sidebar-menu-button-label"> <strong>Documentation</strong> <small>v1.0.1</small> </span> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m7 15 5 5 5-5"></path> <path d="m7 9 5-5 5 5"></path> </svg> </button> <div class="dropdown-menu-content" id="version-switcher" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="version-switcher-trigger"> <div class="dropdown-menu-radio-group" role="group" aria-label="Versions"> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="true" href="/"> v1.0.1 <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/1.1.0-alpha/"> v1.1.0-alpha <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/2.0.0-beta1/"> v2.0.0-beta1 <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> </div> </div> </li> </ul> <form class="docs-search" role="search" action="/search"> <input class="input" type="search" name="q" placeholder="Search the docs..." aria-label="Search the docs"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m21 21-4.34-4.34"></path> <circle cx="11" cy="11" r="8"></circle> </svg> </form> </div> <div class="sidebar-content docs-sections"> <div class="sidebar-group" id="nav-getting" role="group" aria-labelledby="nav-getting-label"> <details class="sidebar-group-collapsible" open> <summary class="sidebar-group-label" id="nav-getting-label"> Getting Started <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-group-label-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/getting-started/installation"> <span class="sidebar-menu-button-label">Installation</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/getting-started/project-structure"> <span class="sidebar-menu-button-label">Project Structure</span> </a> </li> </ul> </div> </details> </div> <div class="sidebar-group" id="nav-build" role="group" aria-labelledby="nav-build-label"> <details class="sidebar-group-collapsible" open> <summary class="sidebar-group-label" id="nav-build-label"> Build Your Application <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-group-label-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/routing"> <span class="sidebar-menu-button-label">Routing</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/build/data-fetching"> <span class="sidebar-menu-button-label">Data Fetching</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/rendering"> <span class="sidebar-menu-button-label">Rendering</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/caching"> <span class="sidebar-menu-button-label">Caching</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/styling"> <span class="sidebar-menu-button-label">Styling</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/optimizing"> <span class="sidebar-menu-button-label">Optimizing</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/configuring"> <span class="sidebar-menu-button-label">Configuring</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/testing"> <span class="sidebar-menu-button-label">Testing</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/authentication"> <span class="sidebar-menu-button-label">Authentication</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/deploying"> <span class="sidebar-menu-button-label">Deploying</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/upgrading"> <span class="sidebar-menu-button-label">Upgrading</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/build/examples"> <span class="sidebar-menu-button-label">Examples</span> </a> </li> </ul> </div> </details> </div> <div class="sidebar-group" id="nav-api" role="group" aria-labelledby="nav-api-label"> <details class="sidebar-group-collapsible" open> <summary class="sidebar-group-label" id="nav-api-label"> API Reference <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-group-label-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/components"> <span class="sidebar-menu-button-label">Components</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/file-conventions"> <span class="sidebar-menu-button-label">File Conventions</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/functions"> <span class="sidebar-menu-button-label">Functions</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/configuration-options"> <span class="sidebar-menu-button-label">Configuration Options</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/cli"> <span class="sidebar-menu-button-label">CLI</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/api/edge-runtime"> <span class="sidebar-menu-button-label">Edge Runtime</span> </a> </li> </ul> </div> </details> </div> <div class="sidebar-group" id="nav-architecture" role="group" aria-labelledby="nav-architecture-label"> <details class="sidebar-group-collapsible" open> <summary class="sidebar-group-label" id="nav-architecture-label"> Architecture <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-group-label-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/architecture/accessibility"> <span class="sidebar-menu-button-label">Accessibility</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/architecture/fast-refresh"> <span class="sidebar-menu-button-label">Fast Refresh</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/architecture/compiler"> <span class="sidebar-menu-button-label">Compiler</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/architecture/supported-browsers"> <span class="sidebar-menu-button-label">Supported Browsers</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/architecture/bundler"> <span class="sidebar-menu-button-label">Bundler</span> </a> </li> </ul> </div> </details> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar" aria-controls="sidebar" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> <div class="separator" data-orientation="vertical" role="none"></div> <nav class="breadcrumb" aria-label="Breadcrumb"> <ol class="breadcrumb-list"> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="/build">Build Your Application</a> </li> <li class="breadcrumb-separator" role="presentation" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="icon breadcrumb-separator-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="breadcrumb-item"> <span class="breadcrumb-page" aria-current="page">Data Fetching</span> </li> </ol> </nav> </header> <div class="page"> <h1>Data Fetching</h1> <div class="placeholder-grid"> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> </div> <div class="placeholder placeholder-tall"></div> </div> </main></div>For reference: the shadcn/ui block this layout is based on.
The layout
Section titled “The layout”The whole layout file. It has what every layout needs: the
theme script and Shadleaf’s assets in the head, the skip link first, one main (<sl:sidebar-inset>), the page’s
title, and the toaster. A section is the browser’s details element, so it opens and closes without JavaScript, and
a closed one is still found by the browser’s find in page.
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sl="https://shadleaf.dev/sl" th:fragment="layout(pageTitle, breadcrumb, content)"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title th:text="${pageTitle}">Page</title> <th:block th:replace="~{sl/layout :: theme-script}"></th:block> <th:block th:replace="~{sl/layout :: assets}"></th:block> <link rel="stylesheet" th:href="@{/css/application.css}"></head><body><sl:skip-link/><sl:sidebar-provider> <sl:sidebar> <sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:dropdown-menu id="version-switcher"> <sl:dropdown-menu-trigger as="sidebar-menu-button" size="lg"> <sl:slot name="icon-start"><span class="app-logo"><sl:icon name="gallery-vertical-end"/></span></sl:slot> <strong>Documentation</strong> <small>v1.0.1</small> <sl:slot name="icon-end"><sl:icon name="chevrons-up-down"/></sl:slot> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content> <sl:dropdown-menu-radio-group aria-label="Versions"> <sl:dropdown-menu-radio-item as="a" th:href="@{/}" checked>v1.0.1</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" th:href="@{/1.1.0-alpha/}">v1.1.0-alpha</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" th:href="@{/2.0.0-beta1/}">v2.0.0-beta1</sl:dropdown-menu-radio-item> </sl:dropdown-menu-radio-group> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu> <form class="docs-search" role="search" th:action="@{/search}"> <sl:input type="search" name="q" placeholder="Search the docs..." aria-label="Search the docs"/> <sl:icon name="search"/> </form> </sl:sidebar-header> <sl:sidebar-content class="docs-sections"> <sl:sidebar-group id="nav-getting" collapsible open> <sl:sidebar-group-label>Getting Started</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/getting-started/installation}" th:active="${#slNav.current('/getting-started/installation')}">Installation</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/getting-started/project-structure}" th:active="${#slNav.current('/getting-started/project-structure')}">Project Structure</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="nav-build" collapsible open> <sl:sidebar-group-label>Build Your Application</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/routing}" th:active="${#slNav.current('/build/routing')}">Routing</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/data-fetching}" th:active="${#slNav.current('/build/data-fetching')}">Data Fetching</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/rendering}" th:active="${#slNav.current('/build/rendering')}">Rendering</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/caching}" th:active="${#slNav.current('/build/caching')}">Caching</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/styling}" th:active="${#slNav.current('/build/styling')}">Styling</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/optimizing}" th:active="${#slNav.current('/build/optimizing')}">Optimizing</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/configuring}" th:active="${#slNav.current('/build/configuring')}">Configuring</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/testing}" th:active="${#slNav.current('/build/testing')}">Testing</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/authentication}" th:active="${#slNav.current('/build/authentication')}">Authentication</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/deploying}" th:active="${#slNav.current('/build/deploying')}">Deploying</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/upgrading}" th:active="${#slNav.current('/build/upgrading')}">Upgrading</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/build/examples}" th:active="${#slNav.current('/build/examples')}">Examples</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="nav-api" collapsible open> <sl:sidebar-group-label>API Reference</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/components}" th:active="${#slNav.current('/api/components')}">Components</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/file-conventions}" th:active="${#slNav.current('/api/file-conventions')}">File Conventions</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/functions}" th:active="${#slNav.current('/api/functions')}">Functions</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/configuration-options}" th:active="${#slNav.current('/api/configuration-options')}">Configuration Options</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/cli}" th:active="${#slNav.current('/api/cli')}">CLI</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/api/edge-runtime}" th:active="${#slNav.current('/api/edge-runtime')}">Edge Runtime</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="nav-architecture" collapsible open> <sl:sidebar-group-label>Architecture</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/architecture/accessibility}" th:active="${#slNav.current('/architecture/accessibility')}">Accessibility</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/architecture/fast-refresh}" th:active="${#slNav.current('/architecture/fast-refresh')}">Fast Refresh</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/architecture/compiler}" th:active="${#slNav.current('/architecture/compiler')}">Compiler</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/architecture/supported-browsers}" th:active="${#slNav.current('/architecture/supported-browsers')}">Supported Browsers</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/architecture/bundler}" th:active="${#slNav.current('/architecture/bundler')}">Bundler</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger/> <sl:separator orientation="vertical"/> <sl:breadcrumb> <sl:breadcrumb-list> <th:block th:replace="${breadcrumb}"></th:block> </sl:breadcrumb-list> </sl:breadcrumb> </sl:site-header> <div class="page"> <h1 th:text="${pageTitle}"></h1> <div th:replace="${content}"></div> </div> </sl:sidebar-inset></sl:sidebar-provider><div id="modal-root"></div><sl:toaster> <sl:toast th:each="toast : ${toasts}" th:title="${toast.title}" th:description="${toast.description}" th:variant="${toast.variant}" th:duration="${toast.duration}"/></sl:toaster></body></html>A page
Section titled “A page”A page passes its title, its breadcrumb’s levels and its content. The levels are a th:block with th:ref, so
nothing of it is rendered where it stands; the layout puts them in its <sl:breadcrumb-list>.
<html xmlns:th="http://www.thymeleaf.org" xmlns:sl="https://shadleaf.dev/sl" th:replace="~{layout/main :: layout('Data Fetching', ~{::breadcrumb}, ~{::#page-content})}"><body><th:block th:ref="breadcrumb"> <sl:breadcrumb-item> <sl:breadcrumb-link th:href="@{/build}">Build Your Application</sl:breadcrumb-link> </sl:breadcrumb-item> <sl:breadcrumb-separator/> <sl:breadcrumb-item> <sl:breadcrumb-page>Data Fetching</sl:breadcrumb-page> </sl:breadcrumb-item></th:block><div id="page-content"> ...</div></body></html>The CSS
Section titled “The CSS”Shadleaf’s CSS styles the components, not the page around them, and has no utility classes. The rest is the
application’s CSS, here without Tailwind: the square behind the logo, the magnifier in the search field, sections
without a gap between them and with labels in the links’ size and colour (the docs-sections class on the
content), a border below the header, and the page’s padding.
/* The square behind the logo in the sidebar's header. */.app-logo { display: grid; place-items: center; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground);}.app-logo > svg { inline-size: 1rem; block-size: 1rem; }
/* The search field: a magnifier inside it, at the start. */.docs-search { position: relative; }.docs-search > .input { block-size: 2rem; padding-inline-start: 2rem; background: var(--background);}.docs-search > svg { position: absolute; inset-inline-start: 0.5rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1rem; block-size: 1rem; opacity: 0.5; pointer-events: none;}
/* The sections close up, and their labels read as the links below them (shadcn's sidebar-02). */.docs-sections { gap: 0; }.docs-sections summary.sidebar-group-label:not(:hover) { font-size: 0.875rem; color: var(--sidebar-foreground);}
/* A border below the page's header, and the page's padding. */.sidebar-inset > .site-header { border-block-end: 1px solid var(--border); }.page { padding: 1rem; }.page > h1 { margin-block-end: 1rem; font-size: 1.5rem; font-weight: 600; }