HPCesia/AstralHalo
1
0
Fork 0
mirror of https://codeberg.org/HPCesia/AstralHalo.git synced 2025-04-08 17:34:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: toc in side toolbar

Browse Source
This commit is contained in:
HPCesia 2025-03-16 14:55:35 +08:00
parent 3ce5375490
commit 334d74f313
1 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/SideToolBar.astro
View File

@ -22,12 +22,16 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
articleConfig.toc && (
<Fragment>
<Button id="stb-toc" class="btn-circle btn-secondary btn-sm hidden xl:hidden!">
<input
type="checkbox"
class="peer absolute z-10 h-8 w-8 cursor-pointer appearance-none border-0"
/>
<Icon name="material-symbols:toc-rounded" />
<div
id="stb-toc-wrapper"
class="rounded-box absolute w-[calc(100vw-4rem)] max-w-72 backdrop-blur-md duration-300 peer-checked:-translate-x-[calc(50%+1.5rem)] peer-[:not(:checked)]:scale-0"
/>
</Button>
<div
id="stb-toc-wrapper"
class="rounded-box absolute bottom-10 hidden w-[calc(100vw-4rem)] max-w-72 -translate-x-full scale-0 backdrop-blur-md duration-300"
/>
</Fragment>
)
}
@ -69,16 +73,9 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
});
});
stbToc?.addEventListener('click', () => {
stbTocWrapper?.classList.toggle('scale-0');
stbTocWrapper?.classList.toggle('-translate-x-full');
});
// 清理可能存在的旧目录
stbTocWrapper!.innerHTML = '';
stbToc?.classList.add('hidden');
stbTocWrapper?.classList.add('hidden');
stbTocWrapper?.classList.add('-translate-x-full');
const toc = document.getElementById('toc');
if (toc && stbTocWrapper) {
@ -91,14 +88,11 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
}
});
stbToc?.classList.remove('hidden');
stbTocWrapper.classList.remove('hidden');
stbTocWrapper?.classList.remove('-translate-x-full');
}
window.addEventListener('resize', () => {
if (window.innerWidth > 1280) {
stbTocWrapper?.classList.add('scale-0');
stbTocWrapper?.classList.remove('-translate-x-full');
(stbToc?.children[0] as HTMLInputElement).checked = false;
}
});