diff --git a/packages/theme-default/src/components/Aside/index.scss b/packages/theme-default/src/components/Aside/index.scss index 67835dcbc..18d979276 100644 --- a/packages/theme-default/src/components/Aside/index.scss +++ b/packages/theme-default/src/components/Aside/index.scss @@ -1,25 +1,23 @@ .aside-link { - padding-bottom: 1px; -} - -.aside-link-text { - padding: 0px 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + padding: 0.25rem 0; + margin-bottom: 1px; border-radius: var(--rp-radius-small) 0 0 var(--rp-radius-small); - font-size: 13px; - line-height: 1.75rem; &:hover { background-color: var(--rp-c-bg-mute); } -} -.aside-active { - &, - &:hover { - color: var(--rp-c-link); - background-color: var(--rp-c-brand-tint); + &.aside-active { + &, + &:hover { + color: var(--rp-c-link); + background-color: var(--rp-c-brand-tint); + } } } + +.aside-link-text { + padding: 0px 12px; + font-size: 0.8125rem; + line-height: 1.25rem; +} diff --git a/packages/theme-default/src/components/Aside/index.tsx b/packages/theme-default/src/components/Aside/index.tsx index 7b40e7b49..c65525a3b 100644 --- a/packages/theme-default/src/components/Aside/index.tsx +++ b/packages/theme-default/src/components/Aside/index.tsx @@ -47,7 +47,7 @@ export function Aside(props: { headers: Header[]; outlineTitle: string }) { title={parseInlineMarkdownText(header.text)} className="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style={{ - paddingLeft: (header.depth - baseHeaderLevel) * 12, + marginLeft: (header.depth - baseHeaderLevel) * 12, fontWeight: 'semibold', }} onClick={e => { diff --git a/packages/theme-default/src/logic/sideEffects.ts b/packages/theme-default/src/logic/sideEffects.ts index ff9a4d69b..eab3f3209 100644 --- a/packages/theme-default/src/logic/sideEffects.ts +++ b/packages/theme-default/src/logic/sideEffects.ts @@ -120,9 +120,7 @@ export function bindingAsideScroll() { const activate = (links: HTMLAnchorElement[], index: number) => { if (links[index]) { const id = links[index].getAttribute('href'); - const currentLink = aside?.querySelector( - `a[href="#${id?.slice(1)}"] > span`, - ); + const currentLink = aside?.querySelector(`a[href="#${id?.slice(1)}"]`); if (currentLink) { if (prevActiveLink) { prevActiveLink.classList.remove('aside-active');