finance/frontend: fix: fixed the border of navbar, added themetoggle button on the login page, fixed some aligned issue with the navbar

2 files changed, 29 insertions, 22 deletions

diff --git a/frontend/src/app/(auth)/layout.tsx b/frontend/src/app/(auth)/layout.tsx
index 9651b4b..6c86133 100644
--- a/frontend/src/app/(auth)/layout.tsx
+++ b/frontend/src/app/(auth)/layout.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { ThemeToggle } from '@/components/shared/ThemeToggle';
 
 export default function AuthLayout({
   children,
@@ -19,7 +20,12 @@ export default function AuthLayout({
   }, [router]);
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 relative">
+      {/* Theme Toggle positioned in the top right corner */}
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+      
       <div className="w-full max-w-md rounded-lg border bg-card p-6 shadow-sm">
         <div className="flex flex-col space-y-2 text-center mb-6">
           <h1 className="text-2xl font-semibold tracking-tight">
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>