Dashboard Layout Sticky Sidebar Scroll

<div class="ws-dashboard-layout ws-layout-sticky-sidebar bg-[var(--ws-color-surface)]">
  <div class="mx-auto max-w-6xl px-4 py-10 sm:px-6">

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-[240px_1fr]">

      <!-- Left: Sticky sidebar navigation -->
      <aside class="lg:sticky lg:top-8 lg:h-fit">
        <p class="mb-4 px-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
          On this page
        </p>
        <nav aria-label="Page sections">
          <ul class="flex flex-col gap-0.5">

            <!-- Active item -->
            <li>
              <a
                href="#section-1"
                class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-semibold text-violet-600"
                aria-current="location"
              >
                <span class="h-5 w-0.5 rounded-full bg-violet-500" aria-hidden="true"></span>
                Getting Started
              </a>
            </li>

            <!-- Inactive items -->
            <li>
              <a
                href="#section-2"
                class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100"
              >
                <span class="h-5 w-0.5 rounded-full bg-transparent" aria-hidden="true"></span>
                Configuration
              </a>
            </li>

            <li>
              <a
                href="#section-3"
                class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100"
              >
                <span class="h-5 w-0.5 rounded-full bg-transparent" aria-hidden="true"></span>
                Advanced Usage
              </a>
            </li>

            <li>
              <a
                href="#section-4"
                class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100"
              >
                <span class="h-5 w-0.5 rounded-full bg-transparent" aria-hidden="true"></span>
                API Reference
              </a>
            </li>

          </ul>
        </nav>
      </aside>

      <!-- Right: Scrollable content column -->
      <main class="min-w-0 overflow-y-auto lg:max-h-[80vh]" tabindex="0" aria-label="Page content">

        <!-- Section 1 -->
        <section id="section-1" class="mb-14 scroll-mt-8">
          <h2 class="mb-4 text-2xl font-bold text-slate-900">Getting Started</h2>
          <p class="mb-4 leading-relaxed text-slate-600">
            Welcome to the documentation. This section walks you through the initial setup and helps you get your environment ready. Follow the steps below to begin.
          </p>
          <p class="mb-4 leading-relaxed text-slate-600">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
          </p>
          <p class="leading-relaxed text-slate-600">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
          </p>
        </section>

        <!-- Section 2 -->
        <section id="section-2" class="mb-14 scroll-mt-8">
          <h2 class="mb-4 text-2xl font-bold text-slate-900">Configuration</h2>
          <p class="mb-4 leading-relaxed text-slate-600">
            All configuration options are available through the settings file. This section covers the most common settings and their default values. You can override any setting at the project or environment level.
          </p>
          <p class="mb-4 leading-relaxed text-slate-600">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
          </p>
          <p class="leading-relaxed text-slate-600">
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
          </p>
        </section>

        <!-- Section 3 -->
        <section id="section-3" class="mb-14 scroll-mt-8">
          <h2 class="mb-4 text-2xl font-bold text-slate-900">Advanced Usage</h2>
          <p class="mb-4 leading-relaxed text-slate-600">
            Once you're comfortable with the basics, you can explore more advanced patterns. This section covers plugin architecture, custom pipelines, and performance optimization techniques.
          </p>
          <p class="mb-4 leading-relaxed text-slate-600">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.
          </p>
          <p class="leading-relaxed text-slate-600">
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.
          </p>
        </section>

        <!-- Section 4 -->
        <section id="section-4" class="scroll-mt-8">
          <h2 class="mb-4 text-2xl font-bold text-slate-900">API Reference</h2>
          <p class="mb-4 leading-relaxed text-slate-600">
            The API is fully documented with TypeScript types. Every method, event, and configuration option is listed here with examples. Use the search to quickly find what you need.
          </p>
          <p class="mb-4 leading-relaxed text-slate-600">
            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
          </p>
          <p class="leading-relaxed text-slate-600">
            Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
          </p>
        </section>

      </main>

    </div>
  </div>
</div>