+ {showBreadcrumb && {
+ const links = new Map();
+ for (const heading of headings) {
+ const link = document.createElement("a");
+ link.href = `#${heading.id}`;
+ link.innerText = heading.innerText;
+ container.appendChild(link);
+ links.set(heading, link);
+ }
+ return links;
+}
+
+/** The first section heading still below the top of the viewport. */
+export const currentHeading = (headings: HTMLHeadingElement[]) =>
+ headings.find((heading) => heading.getBoundingClientRect().top > 0);
- {getNavForVersion(version).categories.map((category) => (
+ {categories.map((category) => (
<>
{category.name}
-
@@ -37,7 +37,25 @@ const { url: pageUrl, version = "latest" } = Astro.props;
if (e.key === "Escape") setDocsNavOpen(false);
});
drawer.addEventListener("click", (e) => {
- if (e.target === e.currentTarget) setDocsNavOpen(false);
+ if (e.target === e.currentTarget) return setDocsNavOpen(false);
+
+ const item = (e.target as Element)
+ .closest("button, a:not([href])")
+ ?.closest("li");
+ if (!item) return;
+
+ drawer.querySelectorAll("li.expanded").forEach((open) => {
+ if (!open.contains(item)) open.classList.remove("expanded");
+ });
+ item.classList.toggle("expanded");
+ drawer
+ .querySelectorAll("li > button")
+ .forEach((button) =>
+ button.setAttribute(
+ "aria-expanded",
+ String(button.parentElement!.classList.contains("expanded")),
+ ),
+ );
});
@@ -120,6 +138,7 @@ const { url: pageUrl, version = "latest" } = Astro.props;
li {
margin: 0;
padding: 0 0 4px;
+ position: relative;
ul {
display: none;
@@ -140,11 +159,44 @@ const { url: pageUrl, version = "latest" } = Astro.props;
display: block;
}
- > a svg {
+ > button svg {
transform: rotate(0);
}
}
+ li > button {
+ align-items: center;
+ appearance: none;
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: flex;
+ height: 29px;
+ justify-content: center;
+ padding: 0;
+ position: absolute;
+ right: 2px;
+ top: 0;
+ width: 30px;
+
+ svg {
+ display: block;
+ height: 12px;
+ transform: rotate(-90deg);
+ transition: transform 0.3s ease-in-out;
+ width: 20px;
+ }
+
+ svg path {
+ stroke: #c6c9d2;
+ transition: stroke 0.3s ease-in-out;
+ }
+
+ &:hover svg path {
+ stroke: #509ee3;
+ }
+ }
+
a {
border-radius: 8px;
color: #5a6072;
@@ -162,41 +214,15 @@ const { url: pageUrl, version = "latest" } = Astro.props;
&.selected {
background-color: #eef6fc;
color: #509ee3;
+ }
- svg path {
- stroke: #509ee3;
- }
+ &.selected + button svg path {
+ stroke: #509ee3;
}
&.selected {
font-weight: 700;
}
-
- > div {
- align-items: center;
- display: flex;
- height: 30px;
- justify-content: center;
- pointer-events: none;
- position: absolute;
- right: 2px;
- top: 50%;
- translate: 0 -50%;
- width: 30px;
- }
-
- svg {
- display: block;
- height: 12px;
- transform: rotate(-90deg);
- transition: transform 0.3s ease-in-out;
- width: 20px;
- }
-
- svg path {
- stroke: #c6c9d2;
- transition: stroke 0.3s ease-in-out;
- }
}
}
diff --git a/src/components/chrome/NavItem.astro b/src/components/chrome/NavItem.astro
index 37c27cc31e..2fb9800320 100644
--- a/src/components/chrome/NavItem.astro
+++ b/src/components/chrome/NavItem.astro
@@ -17,14 +17,18 @@ const expanded = containsUrl(node, pageUrl);