gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Portal mobile TOC overlay to stay floating

Browse Source
This commit is contained in:
gbanyan
2025-11-21 01:48:10 +08:00
parent f6c5be0ee4
commit 7cdfb90b1b
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/post-layout.tsx
View File

@@ -19,6 +19,17 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
setMounted(true); setMounted(true);
}, []); }, []);
const mobileToc = isTocOpen && hasToc && mounted
? createPortal(
<div className="toc-mobile fixed bottom-24 right-4 z-[1150] w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden">
<div className="max-h-[60vh] overflow-y-auto">
<PostToc contentKey={contentKey} onLinkClick={() => setIsTocOpen(false)} />
</div>
</div>,
document.body
)
: null;
const tocButton = hasToc && mounted ? ( const tocButton = hasToc && mounted ? (
<button <button
onClick={() => setIsTocOpen(!isTocOpen)} onClick={() => setIsTocOpen(!isTocOpen)}
@@ -64,13 +75,7 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
</div> </div>
{/* Mobile TOC Overlay */} {/* Mobile TOC Overlay */}
{isTocOpen && hasToc && ( {mobileToc}
<div className="toc-mobile fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden">
<div className="max-h-[60vh] overflow-y-auto">
<PostToc contentKey={contentKey} onLinkClick={() => setIsTocOpen(false)} />
</div>
</div>
)}
{/* Toggle Button - Rendered via Portal */} {/* Toggle Button - Rendered via Portal */}
{tocButton && createPortal(tocButton, document.body)} {tocButton && createPortal(tocButton, document.body)}