tabler/docs/components/DocsMenu.astro

---
// Equivalent of docs/menu.html. In Eleventy the menu is built from `collections.docs |
// collection-tree` (the tree of content/**/*.md files of the @tabler/docs app); in the PoC
// the tree is frozen in shared/data/docs.json (extracted from the reference
// development docs build).

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">
  {
    menu.map((level1) => (
      <div>
        <Subheader class="mb-2">{level1.title}</Subheader>
        {level1.children && level1.children.length > 0 && (
          <nav 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>
                  {/* as in Liquid: 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' : ''}`}>{level2.title}</a>
                  )}

                  {hasChildren && (
                    <nav 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>
                      ))}
                    </nav>
                  )}
                </div>
              )
            })}
          </nav>
        )}
      </div>
    ))
  }
</nav>
<!-- END DOCS MENU -->