d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

catalog 高度自适应

Browse Source
This commit is contained in:
Bhwa233
2024-03-15 18:00:03 +08:00
parent b1e0e1e376
commit 725622621f
2 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
themes/fukasawa/components/AsideLeft.js
View File

@@ -133,13 +133,12 @@ function AsideLeft(props) {
<DarkModeButton />
</section>
<section className='sticky top-0 pt-12'>
<section className='sticky top-0 pt-12 flex flex-col max-h-screen '>
<Catalog toc={post?.toc} />
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>
</div>
</div>
}

38
themes/fukasawa/components/Catalog.js
View File

@@ -58,29 +58,27 @@ const Catalog = ({ toc }) => {
if (!toc || toc?.length < 1) {
return <></>
}
return <div id='catalog'>
return <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
<div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
<div className='max-h-[calc(100vh-8rem)]'>
<nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden text-black'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
<nav ref={tRef} className='flex-1 overflow-auto overscroll-none scroll-hidden text-black mb-6'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
>
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
>
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
>
{tocItem.text}
</span>
</a>
)
})}
</nav>
</div>
{tocItem.text}
</span>
</a>
)
})}
</nav>
</div>
}