diff options
Diffstat (limited to 'frontend/src/app/(main)')
| -rw-r--r-- | frontend/src/app/(main)/layout.tsx | 43 |
1 files changed, 22 insertions, 21 deletions
diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx index 5902dd6..ee1026c 100644 --- a/frontend/src/app/(main)/layout.tsx +++ b/frontend/src/app/(main)/layout.tsx @@ -93,7 +93,7 @@ export default function MainLayout({ return ( <div className="min-h-screen bg-background flex flex-col"> {/* Top Navigation */} - <header className="border-b shadow-sm backdrop-blur-sm bg-background/90 sticky top-0 z-50"> + <header className="border-b shadow-sm backdrop-blur-sm bg-background/90 sticky top-0 z-50 w-full"> <div className="w-full flex h-16 items-center px-4 md:px-6"> <div className="flex items-center gap-4"> {/* Mobile menu button - only visible on small screens */} @@ -199,11 +199,12 @@ export default function MainLayout({ </div> {/* Main Content */} - <div className="flex flex-1 h-[calc(100vh-4rem)]"> + <div className="flex flex-1 overflow-hidden"> {/* Sidebar - hidden on mobile */} <aside className={` - hidden md:block relative h-full transition-all duration-300 ease-in-out border-r + hidden md:flex flex-col h-[calc(100vh-4rem)] border-r bg-background flex-shrink-0 relative + transition-all duration-300 ease-in-out ${isSidebarCollapsed ? 'w-16' : 'w-64'} `} > @@ -218,11 +219,11 @@ export default function MainLayout({ </div> </button> - <nav className="space-y-2 px-2 mt-4"> + <nav className="space-y-2 px-2 mt-4 flex-1"> <Link href="/dashboard" className={` - flex items-center p-2 rounded-md transition-all duration-200 + flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden ${pathname === '/dashboard' ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted text-foreground/80 hover:text-foreground' @@ -232,14 +233,14 @@ export default function MainLayout({ title="Dashboard" > <LayoutDashboardIcon size={18} className={`transition-transform duration-300 ${pathname === '/dashboard' ? 'scale-110' : ''}`} /> - {!isSidebarCollapsed && ( - <span className="ml-2 transition-opacity duration-300 opacity-100">Dashboard</span> - )} + <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}> + Dashboard + </span> </Link> <Link href="/loans" className={` - flex items-center p-2 rounded-md transition-all duration-200 + flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden ${pathname === '/loans' ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted text-foreground/80 hover:text-foreground' @@ -249,14 +250,14 @@ export default function MainLayout({ title="Loans" > <CoinsIcon size={18} className={`transition-transform duration-300 ${pathname === '/loans' ? 'scale-110' : ''}`} /> - {!isSidebarCollapsed && ( - <span className="ml-2 transition-opacity duration-300 opacity-100">Loans</span> - )} + <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}> + Loans + </span> </Link> <Link href="/goals" className={` - flex items-center p-2 rounded-md transition-all duration-200 + flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden ${pathname === '/goals' ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted text-foreground/80 hover:text-foreground' @@ -266,14 +267,14 @@ export default function MainLayout({ title="Goals" > <TargetIcon size={18} className={`transition-transform duration-300 ${pathname === '/goals' ? 'scale-110' : ''}`} /> - {!isSidebarCollapsed && ( - <span className="ml-2 transition-opacity duration-300 opacity-100">Goals</span> - )} + <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}> + Goals + </span> </Link> <Link href="/settings" className={` - flex items-center p-2 rounded-md transition-all duration-200 + flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden ${pathname === '/settings' ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted text-foreground/80 hover:text-foreground' @@ -283,15 +284,15 @@ export default function MainLayout({ title="Settings" > <SettingsIcon size={18} className={`transition-transform duration-300 ${pathname === '/settings' ? 'scale-110' : ''}`} /> - {!isSidebarCollapsed && ( - <span className="ml-2 transition-opacity duration-300 opacity-100">Settings</span> - )} + <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}> + Settings + </span> </Link> </nav> </aside> {/* Page Content */} - <main className="flex-1 p-4 md:p-8 overflow-auto transition-all duration-300"> + <main className="flex-1 p-4 md:p-8 overflow-auto h-[calc(100vh-4rem)] transition-all duration-300"> <PageTransition> {children} </PageTransition> |