---
// Astro: same BEM structure; use DocsSidebar.astro for nav.
---
<!-- Docs layout: sidebar + main. Same BEM classes work in any framework. -->
<div class="docs" data-docs>
  <aside class="docs-sidebar" aria-label="Documentation navigation">
    <nav class="docs-sidebar__nav">
      <a href="#" class="docs-sidebar__link docs-sidebar__link--active">Introduction</a>
      <a href="#" class="docs-sidebar__link">Foundations</a>
      <a href="#" class="docs-sidebar__link">Components</a>
    </nav>
  </aside>
  <main class="docs__main">
    <div class="docs__container">
      <header class="docs__header">
        <h1 class="docs__title">Page title</h1>
        <p class="docs__description">Optional description.</p>
      </header>
      <div class="docs__content">
        <p>Main content. Use Rizzo typography and spacing tokens.</p>
      </div>
    </div>
  </main>
</div>

<!-- Docs layout: sidebar + main. Same BEM classes work in any framework. -->
<div class="docs" data-docs>
  <aside class="docs-sidebar" aria-label="Documentation navigation">
    <nav class="docs-sidebar__nav">
      <a href="#" class="docs-sidebar__link docs-sidebar__link--active">Introduction</a>
      <a href="#" class="docs-sidebar__link">Foundations</a>
      <a href="#" class="docs-sidebar__link">Components</a>
    </nav>
  </aside>
  <main class="docs__main">
    <div class="docs__container">
      <header class="docs__header">
        <h1 class="docs__title">Page title</h1>
        <p class="docs__description">Optional description.</p>
      </header>
      <div class="docs__content">
        <p>Main content. Use Rizzo typography and spacing tokens.</p>
      </div>
    </div>
  </main>
</div>

<script>
  // Svelte: same BEM classes; use DocsSidebar from $lib/rizzo for nav.
</script>

<!-- Docs layout: sidebar + main. Same BEM classes work in any framework. -->
<div class="docs" data-docs>
  <aside class="docs-sidebar" aria-label="Documentation navigation">
    <nav class="docs-sidebar__nav">
      <a href="#" class="docs-sidebar__link docs-sidebar__link--active">Introduction</a>
      <a href="#" class="docs-sidebar__link">Foundations</a>
      <a href="#" class="docs-sidebar__link">Components</a>
    </nav>
  </aside>
  <main class="docs__main">
    <div class="docs__container">
      <header class="docs__header">
        <h1 class="docs__title">Page title</h1>
        <p class="docs__description">Optional description.</p>
      </header>
      <div class="docs__content">
        <p>Main content. Use Rizzo typography and spacing tokens.</p>
      </div>
    </div>
  </main>
</div>

<script setup>
// Vue: same BEM classes; use DocsSidebar from @/components/rizzo for nav.
</script>

<template>
  <div class="docs" data-docs>
    <aside class="docs-sidebar" aria-label="Documentation navigation">
      <nav class="docs-sidebar__nav">
        <a href="#" class="docs-sidebar__link docs-sidebar__link--active">Introduction</a>
        <a href="#" class="docs-sidebar__link">Foundations</a>
        <a href="#" class="docs-sidebar__link">Components</a>
      </nav>
    </aside>
    <main class="docs__main">
      <div class="docs__container">
        <header class="docs__header">
          <h1 class="docs__title">Page title</h1>
          <p class="docs__description">Optional description.</p>
        </header>
        <div class="docs__content">
          <p>Main content. Use Rizzo typography and spacing tokens.</p>
        </div>
      </div>
    </main>
  </div>
</template>

export function DocsLayoutBlock() {
  return (
    <div className="docs" data-docs>
      <aside className="docs-sidebar" aria-label="Documentation navigation">
        <nav className="docs-sidebar__nav">
          <a href="#" className="docs-sidebar__link docs-sidebar__link--active">Introduction</a>
          <a href="#" className="docs-sidebar__link">Foundations</a>
          <a href="#" className="docs-sidebar__link">Components</a>
        </nav>
      </aside>
      <main className="docs__main">
        <div className="docs__container">
          <header className="docs__header">
            <h1 className="docs__title">Page title</h1>
            <p className="docs__description">Optional description.</p>
          </header>
          <div className="docs__content">
            <p>Main content. Use Rizzo typography and spacing tokens.</p>
          </div>
        </div>
      </main>
    </div>
  );
}