Docs Sidebar — React

---
import DocsSidebar from '../components/DocsSidebar.astro';
import { getFrameworkFromPath } from '../config/frameworks';

const currentPath = Astro.url.pathname;
const { framework } = getFrameworkFromPath(currentPath);
---

<DocsSidebar currentPath={currentPath} framework={framework} />

<!-- Layout: sidebar + main. BEM: docs-sidebar, docs-sidebar__nav, docs-sidebar__group, docs-sidebar__group-label, docs-sidebar__list, docs-sidebar__item, docs-sidebar__link, docs-sidebar__link--active. Populate links from nav config; set --active on current link. See /docs/vanilla/components/docs-sidebar for full HTML. -->
<div class="docs-layout" style="display:flex;">
  <aside class="docs-sidebar" aria-label="Documentation navigation"><nav class="docs-sidebar__nav">...</nav></aside>
  <main class="docs__main" style="flex:1;"><div class="docs__content"><!-- Page content --></div></main>
</div>

<script>
  import { DocsSidebar } from '$lib/rizzo';
</script>

<DocsSidebar currentPath={$page.url.pathname} pathPrefix="/docs" />

<script setup>
import DocsSidebar from '@/components/rizzo/DocsSidebar.vue';
</script>

<template>
  <DocsSidebar>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Introduction</h2>
      <ul class="docs-sidebar__list">
        <li class="docs-sidebar__item"><a href="/docs/vue/overview" class="docs-sidebar__link">Overview</a></li>
        <li class="docs-sidebar__item"><a href="/docs/vue/showcase" class="docs-sidebar__link">Showcase</a></li>
        <li class="docs-sidebar__item"><a href="/docs/vue/getting-started" class="docs-sidebar__link">Getting Started</a></li>
      </ul>
    </div>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Foundations</h2>
      <ul class="docs-sidebar__list">...</ul>
    </div>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Components</h2>
      <ul class="docs-sidebar__list">...</ul>
    </div>
  </DocsSidebar>
</template>

import { DocsSidebar } from './components/react';

<DocsSidebar
  pathPrefix="/docs/react"
  currentPath={pathname}
/>