Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-14 06:47:00 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: Allow sidebar button list to scroll internally on overflow (#2791)

Browse Source
This commit is contained in:
Yao Changyi
2026-03-11 05:58:56 +08:00
committed by GitHub
parent afbe56af0d
commit feab19913b
4 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/builder/$resumeId/-components/edge.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export function BuilderSidebarEdge({ side, children }: Props) {
return (
<div
className={cn(
"absolute inset-y-0 hidden w-12 flex-col items-center justify-between bg-popover py-2.5 sm:flex",
"absolute inset-y-0 hidden min-h-0 w-12 flex-col items-center overflow-hidden bg-popover py-2.5 sm:flex",
side === "left" ? "inset-s-0 border-r" : "inset-e-0 border-l",
)}
>
src/routes/builder/$resumeId/-sidebar/left/index.tsx
+26 -24
View File
@@ -88,32 +88,34 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
return (
<BuilderSidebarEdge side="left">
<div />
<div className="flex min-h-0 w-full flex-1 flex-col items-center gap-y-2 overflow-hidden">
<div className="no-scrollbar min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden">
<div className="flex min-h-full flex-col items-center justify-center gap-y-2">
{leftSidebarSections.map((section) => (
<Button
key={section}
size="icon"
variant="ghost"
title={getSectionTitle(section)}
onClick={() => scrollToSection(section)}
>
{getSectionIcon(section)}
</Button>
))}
</div>
</div>
<div className="flex flex-col justify-center gap-y-2">
{leftSidebarSections.map((section) => (
<Button
key={section}
size="icon"
variant="ghost"
title={getSectionTitle(section)}
onClick={() => scrollToSection(section)}
>
{getSectionIcon(section)}
</Button>
))}
<UserDropdownMenu>
{({ session }) => (
<Button size="icon" variant="ghost">
<Avatar className="size-6">
<AvatarImage src={session.user.image ?? undefined} />
<AvatarFallback className="text-[0.5rem]">{getInitials(session.user.name)}</AvatarFallback>
</Avatar>
</Button>
)}
</UserDropdownMenu>
</div>
<UserDropdownMenu>
{({ session }) => (
<Button size="icon" variant="ghost">
<Avatar className="size-6">
<AvatarImage src={session.user.image ?? undefined} />
<AvatarFallback className="text-[0.5rem]">{getInitials(session.user.name)}</AvatarFallback>
</Avatar>
</Button>
)}
</UserDropdownMenu>
</BuilderSidebarEdge>
);
}
src/routes/builder/$resumeId/-sidebar/right/index.tsx
+3 -5
View File
@@ -83,9 +83,8 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
return (
<BuilderSidebarEdge side="right">
<div />
<div className="flex flex-col justify-center gap-y-2">
<div className="no-scrollbar min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden">
<div className="flex min-h-full flex-col items-center justify-center gap-y-2">
{rightSidebarSections.map((section) => (
<Button
key={section}
@@ -98,8 +97,7 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
</Button>
))}
</div>
<div />
</div>
</BuilderSidebarEdge>
);
}
src/styles/globals.css
+8
View File
@@ -131,6 +131,14 @@
aspect-ratio: 1 / 1.4142;
}
@utility no-scrollbar {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
@layer base {
* {
@apply border-border outline-ring/50 min-w-0;