tabler/docs/components/DocsMenu.astro

---
// Menu tree from shared/data/docs.json.
import Subheader from '@ui/Subheader.astro'
import docs from '@data/docs.json'
import { pathSlug as slug } from '@shared/lib/string-format'

interface MenuLeaf {
  title: string
  url: string
}

interface MenuGroup extends MenuLeaf {
  children?: MenuLeaf[]
}

interface MenuSection {
  title: string
  children?: MenuGroup[]
}

interface Props {
  /** Page URL in the docs namespace (equivalent of page.url), e.g. "/ui/components/alert". */
  url: string
}

const { url } = Astro.props
const menu = docs.menu as MenuSection[]
---

<!-- BEGIN DOCS MENU -->
<nav class="space-y space-y-5" id="menu" aria-label="Documentation">
  {
    menu.map((level1) => (
      <div>
        <Subheader class="mb-2">{level1.title}</Subheader>
        {level1.children && level1.children.length > 0 && (
          <div class="nav nav-vertical">
            {level1.children.map((level2) => {
              const hasChildren = Boolean(level2.children && level2.children.length > 0)
              // Expanded only for the group's own page or one of its direct children —
              // a prefix check would also expand "Introduction" on /ui/getting-started/frameworks/* pages.
              const expanded = url === level2.url || Boolean(level2.children?.some((child) => child.url === url))
              return (
                <div>
                  {/* href/data-bs-* only when the element has children */}
                  {hasChildren ? (
                    <a class={`nav-link${expanded ? ' active' : ''}`} href={level2.url} data-bs-toggle="collapse" data-bs-target={`#collapse-${slug(level2.url)}`} aria-expanded={expanded ? 'true' : 'false'}>
                      {level2.title} <span class="nav-link-toggle" />
                    </a>
                  ) : (
                    <a class={`nav-link${expanded ? ' active' : ''}`} href={level2.url}>
                      {level2.title}
                    </a>
                  )}

                  {hasChildren && (
                    <div class={`nav nav-vertical collapse${expanded ? ' show' : ''}`} id={`collapse-${slug(level2.url)}`}>
                      {level2.children!.map((level3) => (
                        <div>
                          <a class={`nav-link${url === level3.url ? ' active' : ''}`} href={level3.url}>
                            {level3.title}
                          </a>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </div>
    ))
  }
</nav>
<!-- END DOCS MENU -->