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; 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 */ /* Text viewer specific scrollbar */
.custom-scrollbar::-webkit-scrollbar { .custom-scrollbar::-webkit-scrollbar {
width: 12px; width: 12px;

4
src/app/layout.tsx
View File

@ -23,9 +23,9 @@ export default function RootLayout({
<body <body
className={`${inter.variable} antialiased bg-background text-foreground`} 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 /> <Sidebar />
<main className="flex-1 bg-background/50 backdrop-blur-sm"> <main className="flex-1 bg-background/50 backdrop-blur-sm overflow-hidden">
{children} {children}
</main> </main>
</div> </div>

12
src/components/sidebar.tsx
View File

@ -57,7 +57,7 @@ const SidebarContent = () => {
return ( return (
<div <div
className={cn( 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" isCollapsed ? "w-16" : "w-64"
)} )}
> >
@ -82,7 +82,8 @@ const SidebarContent = () => {
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className="flex-1 px-3 py-4 space-y-1"> <nav className="flex-1 px-3 py-4 space-y-1 overflow-hidden flex flex-col">
<div className="space-y-1">
{navItems.map((item) => ( {navItems.map((item) => (
<Link key={item.href} href={item.href} passHref> <Link key={item.href} href={item.href} passHref>
<Button <Button
@ -100,12 +101,13 @@ const SidebarContent = () => {
</Button> </Button>
</Link> </Link>
))} ))}
</div>
{/* Libraries Section */} {/* Libraries Section */}
{libraries.length > 0 && ( {libraries.length > 0 && (
<div className="pt-6"> <div className="pt-6 flex-1 flex flex-col overflow-hidden">
<div className={cn( <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" isCollapsed && "justify-center"
)}> )}>
<FolderOpen className="h-4 w-4 text-muted-foreground" /> <FolderOpen className="h-4 w-4 text-muted-foreground" />
@ -115,7 +117,7 @@ const SidebarContent = () => {
</h2> </h2>
)} )}
</div> </div>
<div className="space-y-1"> <div className="space-y-1 overflow-y-auto flex-1 sidebar-scrollbar">
{libraries.map((lib) => ( {libraries.map((lib) => (
<Link <Link
href={`/folder-viewer?path=${encodeURIComponent(lib.path)}`} href={`/folder-viewer?path=${encodeURIComponent(lib.path)}`}