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

Make right sidebar sticky like TOC on single posts

Browse Source
This commit is contained in:
gbanyan
2025-11-17 20:56:49 +08:00
parent 5d0fc0fc8b
commit c675fa65e3
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/right-sidebar.tsx
View File

@@ -7,8 +7,9 @@ export function RightSidebar() {
const tags = getAllTagsWithCount().slice(0, 30); const tags = getAllTagsWithCount().slice(0, 30);
return ( return (
<aside className="hidden flex-col gap-4 lg:flex"> <aside className="hidden lg:block">
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100"> <div className="sticky top-20 flex flex-col gap-4">
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400"> <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
關於本站 關於本站
</h2> </h2>
@@ -69,6 +70,7 @@ export function RightSidebar() {
</div> </div>
</section> </section>
)} )}
</div>
</aside> </aside>
); );
} }