working on new login sign up flow

frontend/src/components/Navbar.tsx

@@ -1,22 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
+import AuthModal from './AuthModal';
 
 const Navbar: React.FC = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const [showAuthModal, setShowAuthModal] = useState(false);
+  const [authModalMode, setAuthModalMode] = useState<'login' | 'signup'>('login');
 
   const handleLogout = () => {
     logout();
     navigate('/');
   };
 
+  const openAuthModal = (mode: 'login' | 'signup') => {
+    setAuthModalMode(mode);
+    setShowAuthModal(true);
+  };
+
   return (
+    <>
     <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
       <div className="container-fluid" style={{ maxWidth: '1800px' }}>
         <Link className="navbar-brand fw-bold" to="/">
           <i className="bi bi-box-seam me-2"></i>
-          Rentall
+          CommunityRentals.App
         </Link>
         <button
           className="navbar-toggler"
@@ -96,18 +105,14 @@ const Navbar: React.FC = () => {
                     </li>
                   </>
                 ) : (
-                  <>
-                    <li className="nav-item me-2">
-                      <Link className="btn btn-outline-secondary btn-sm text-nowrap" to="/login">
-                        Login
-                      </Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link className="btn btn-primary btn-sm text-nowrap" to="/register">
-                        Sign Up
-                      </Link>
-                    </li>
-                  </>
+                  <li className="nav-item">
+                    <button 
+                      className="btn btn-primary btn-sm text-nowrap" 
+                      onClick={() => openAuthModal('login')}
+                    >
+                      Login or Sign Up
+                    </button>
+                  </li>
                 )}
               </ul>
             </div>
@@ -115,6 +120,13 @@ const Navbar: React.FC = () => {
         </div>
       </div>
     </nav>
+    
+    <AuthModal 
+      show={showAuthModal} 
+      onHide={() => setShowAuthModal(false)}
+      initialMode={authModalMode}
+    />
+  </>
   );
 };