bootstrap/site/src/components/DocsSidebar.astro at 26a9da88256d3b5d809623955c6530aaf6e85d5b · twbs/bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
---
import { getData } from '@libs/data'
import { getConfig } from '@libs/config'
import { docsPages } from '@libs/content'
import { getSlug } from '@libs/utils'

const sidebar = getData('sidebar')
---

<nav class="w-100 bd-links" id="bd-docs-nav" aria-label="Docs navigation">
  <ul class="list-unstyled mb-0 pe-lg-2 pb-3 pb-md-2 bd-links-nav">
    {
      sidebar.map((group) => {
        const groupSlug = getSlug(group.title)

        if (group.pages) {
          return (
            <li class="bd-links-group py-2">
              <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
                {group.icon && (
                  <svg
                    class="bi me-2"
                    style={group.icon_color && `color: var(--bs-${group.icon_color});`}
                    aria-hidden="true"
                  >
                    <use xlink:href={`#${group.icon}`} />
                  </svg>
                )}
                {group.title}
              </strong>
              <ul class="list-unstyled fw-normal pb-2 small">
                {group.pages?.map((page) => {
                  const docSlug = getSlug(page.title)
                  const unversionedPageSlug = `${groupSlug}/${docSlug}`

                  const url = `/docs/${getConfig().docs_version}/${unversionedPageSlug}`
                  const active = Astro.params.slug === unversionedPageSlug

                  const generatedPage = docsPages.find((page) => page.slug === unversionedPageSlug)

                  // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
                  if (!generatedPage) {
                    throw new Error(
                      `The page '${page.title}' referenced in 'site/data/sidebar.yml' does not exist at '${url}'.`
                    )
                  }

                  return (
                    <li>
                      <a
                        href={url}
                        class:list={['bd-links-link d-inline-block rounded', { active }]}
                        aria-current={active ? 'page' : undefined}
                      >
                        {page.title}
                      </a>
                    </li>
                  )
                })}
              </ul>
            </li>
          )
        } else {
          const active = Astro.params.slug === groupSlug

          return (
            <>
              <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top" />
              <li class="bd-links-span-all">
                <a
                  href={`/docs/${getConfig().docs_version}/${groupSlug}/`}
                  class:list={['bd-links-link d-inline-block rounded small', { active }]}
                  aria-current={active ? 'page' : undefined}
                >
                  {group.title}
                </a>
              </li>
            </>
          )
        }
      })
    }
  </ul>
</nav>