xorbitlab
/
nextav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

style(sidebar): improve layout and add custom scrollbar styling 

- Add custom scrollbar styles for sidebar with hover transitions
- Set fixed height and overflow hidden on sidebar container for consistent layout
- Add overflow-hidden to main content wrapper for better scroll handling
- Update navigation and library sections to use flex layout with proper overflow control
- Add scrollbar with custom style to libraries list for better UX during scrolling
- Ensure sidebar and its elements adapt properly when collapsed or expanded
This commit is contained in:
tigeren 2025-09-21 16:46:18 +00:00
parent b8b46fcf0e
commit 9ccc88d5ee
3 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/globals.css
View File

@ -99,6 +99,25 @@
background: transparent;
}
/* Sidebar scrollbar styling */
.sidebar-scrollbar::-webkit-scrollbar {
width: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.2);
border-radius: 2px;
transition: background 0.2s ease;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.4);
}
/* Text viewer specific scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 12px;

4
src/app/layout.tsx
View File

@ -23,9 +23,9 @@ export default function RootLayout({
<body
className={`${inter.variable} antialiased bg-background text-foreground`}
>
<div className="flex h-screen bg-gradient-to-br from-background via-background to-muted/20">
<div className="flex h-screen bg-gradient-to-br from-background via-background to-muted/20 overflow-hidden">
<Sidebar />
<main className="flex-1 bg-background/50 backdrop-blur-sm">
<main className="flex-1 bg-background/50 backdrop-blur-sm overflow-hidden">
{children}
</main>
</div>

46
src/components/sidebar.tsx
View File

@ -57,7 +57,7 @@ const SidebarContent = () => {
return (
<div
className={cn(
"flex flex-col bg-card border-r border-border transition-all duration-300 ease-in-out shadow-lg",
"flex flex-col bg-card border-r border-border transition-all duration-300 ease-in-out shadow-lg h-full overflow-hidden",
isCollapsed ? "w-16" : "w-64"
)}
>
@ -82,30 +82,32 @@ const SidebarContent = () => {
</div>
{/* Navigation */}
<nav className="flex-1 px-3 py-4 space-y-1">
{navItems.map((item) => (
<Link key={item.href} href={item.href} passHref>
<Button
variant="ghost"
className={cn(
"w-full justify-start h-10 text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-lg transition-all group",
pathname === item.href && "bg-primary/10 text-primary border border-primary/20 shadow-sm"
)}
>
<item.icon className={cn(
"h-4 w-4 transition-colors",
pathname === item.href ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
)} />
{!isCollapsed && <span className="ml-3 font-medium text-sm">{item.label}</span>}
</Button>
</Link>
))}
<nav className="flex-1 px-3 py-4 space-y-1 overflow-hidden flex flex-col">
<div className="space-y-1">
{navItems.map((item) => (
<Link key={item.href} href={item.href} passHref>
<Button
variant="ghost"
className={cn(
"w-full justify-start h-10 text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-lg transition-all group",
pathname === item.href && "bg-primary/10 text-primary border border-primary/20 shadow-sm"
)}
>
<item.icon className={cn(
"h-4 w-4 transition-colors",
pathname === item.href ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
)} />
{!isCollapsed && <span className="ml-3 font-medium text-sm">{item.label}</span>}
</Button>
</Link>
))}
</div>
{/* Libraries Section */}
{libraries.length > 0 && (
<div className="pt-6">
<div className="pt-6 flex-1 flex flex-col overflow-hidden">
<div className={cn(
"flex items-center gap-2 px-3 mb-3",
"flex items-center gap-2 px-3 mb-3 flex-shrink-0",
isCollapsed && "justify-center"
)}>
<FolderOpen className="h-4 w-4 text-muted-foreground" />
@ -115,7 +117,7 @@ const SidebarContent = () => {
</h2>
)}
</div>
<div className="space-y-1">
<div className="space-y-1 overflow-y-auto flex-1 sidebar-scrollbar">
{libraries.map((lib) => (
<Link
href={`/folder-viewer?path=${encodeURIComponent(lib.path)}`}