3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add scrollable page thumbnails with scrollbar styling in page sidebar

Browse Source
This commit is contained in:
Riccardo Giorato
2026-02-11 11:27:04 +01:00
parent a56a21bc87
commit a05fdea297
1 changed files with 54 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/page-sidebar.tsx
+7 -5
View File
@@ -33,16 +33,17 @@ export function PageSidebar({
isOwner = true,
}: PageSidebarProps) {
return (
<aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between">
<aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between h-full">
{/* Top section: page thumbnails */}
<div className="flex flex-col items-center gap-3">
<div className="flex-1 w-full overflow-y-auto min-h-0 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/60 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground">
<div className="flex flex-col items-center gap-3 px-2 py-1">
{pages.map((page, index) => (
<button
key={page.id}
onClick={() => onPageSelect(index)}
disabled={loadingPageId === index}
className={`
w-16 h-16 rounded-lg transition-all relative overflow-hidden
w-16 h-16 rounded-lg transition-all relative overflow-hidden flex-shrink-0
${
currentPage === index
? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
@@ -82,14 +83,15 @@ export function PageSidebar({
{isOwner && (
<button
onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center flex-shrink-0"
>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
</button>
)}
</div>
</div>
<div className="flex flex-col items-center gap-3">
<div className="flex flex-col items-center gap-3 pt-2">
{/* API Key Button */}
<Button
onClick={onApiKeyClick}