From 4cd8498ad30e6ea5f01e81346a81a2a1134864be Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Fri, 25 Apr 2025 00:18:09 +0530
Subject: finance/frontend: fix: fixed the border of navbar, added themetoggle
 button on the login page, fixed some aligned issue with the navbar

---
 frontend/src/app/(main)/layout.tsx | 43 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

(limited to 'frontend/src/app/(main)')

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>
-- 
cgit v1.2.3-59-g8ed1b