juyung/fuwari
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fix incorrect position of TOC indicator

Browse source
This commit is contained in:
saicaca 2024-12-06 20:53:24 +08:00
parent 9ab977fe4c
commit eb3f9f2676
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/widget/TOC.astro
View file

@ -52,7 +52,7 @@ const maxLevel = siteConfig.toc.depth;
}]}>{removeTailingHash(heading.text)}</div>
</a>
)}
<div id="active-indicator" class="-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 h-16 rounded-xl transition-all
<div id="active-indicator" class="-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all
group-hover:bg-transparent border-2 border-[var(--toc-btn-hover)] group-hover:border-[var(--toc-btn-active)] border-dashed"></div>
</table-of-contents>
@ -198,6 +198,13 @@ class TableOfContents extends HTMLElement {
}
connectedCallback() {
// wait for the onload animation to finish, which makes the `getBoundingClientRect` return correct values
setTimeout(() => {
this.init();
}, 250);
}
init() {
this.tocEl = document.getElementById(
"toc-inner-wrapper"
);