mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-05 21:30:51 +04:00
83 lines
2.4 KiB
Plaintext
83 lines
2.4 KiB
Plaintext
---
|
|
import { NAVBAR_HEIGHT } from "@constants/constants";
|
|
import { i18n } from "@i18n/translation";
|
|
import I18nKey from "@i18n/i18nKey";
|
|
import WidgetLayout from "./widgetLayout.astro";
|
|
|
|
|
|
interface Props {
|
|
id?: string;
|
|
class?: string;
|
|
style?: string;
|
|
depth?: number;
|
|
side?: string;
|
|
}
|
|
|
|
const { id: propId, class: className, style, depth = 3, side = "default" } = Astro.props;
|
|
const id = propId || `toc-wrapper-${side}`;
|
|
---
|
|
|
|
<WidgetLayout name={i18n(I18nKey.tableOfContents)} id={id} class:list={[className, "toc-wrapper", "toc-hide"]} style={style}>
|
|
<div class="toc-scroll-container">
|
|
<table-of-contents class="group" data-depth={depth} data-navbar-height={NAVBAR_HEIGHT}>
|
|
<div class="toc-inner-content relative"></div>
|
|
</table-of-contents>
|
|
</div>
|
|
</WidgetLayout>
|
|
|
|
<script>
|
|
import "./toc";
|
|
</script>
|
|
|
|
<style>
|
|
.toc-scroll-container {
|
|
max-height: calc(100vh - 20rem);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
}
|
|
.toc-scroll-container::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.toc-scroll-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.toc-scroll-container::-webkit-scrollbar-thumb {
|
|
background: var(--toc-btn-hover);
|
|
border-radius: 10px;
|
|
}
|
|
table-of-contents#toc {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
/* 高亮当前项文字 */
|
|
:global(.toc-inner-content a.visible .text-50),
|
|
:global(.toc-inner-content a.visible .text-30) {
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 基础过渡样式 */
|
|
:global(widget-layout.toc-wrapper) {
|
|
transition:
|
|
max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
margin-bottom 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
padding 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
visibility 300ms;
|
|
max-height: 1200px; /* 足够容纳目录的高度，避免 100vh 可能带来的过长过渡延迟 */
|
|
overflow: hidden;
|
|
}
|
|
/* 隐藏状态 */
|
|
:global(widget-layout.toc-wrapper.toc-hide) {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
margin-bottom: -1rem; /* 抵消父级 flex 的 gap-4 */
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
</style> |