diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 5893b72..bdd2a3a 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -9,6 +9,8 @@ import { CTAButton } from './CTAButton'; import logoImage from '../assets/cit-logo.png'; import melbourneLogo from '../assets/melbourne-logo.png'; import { CitySelectionDialog } from './CitySelectionDialog'; +import { useAuth } from '../context/AuthContext'; +import { LoginModal } from './LoginModal'; interface NavbarProps { activeCity: string; @@ -63,7 +65,7 @@ export default function Navbar({ onSignInClick, onSignOutClick, isUserSignedIn = false, - user + // user }: NavbarProps) { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); @@ -85,6 +87,22 @@ export default function Navbar({ const navigate = useNavigate(); const [lastKnownCity, setLastKnownCity] = useState<'landing' | 'melbourne'>('landing'); + const [isLoginOpen, setLoginOpen] = useState(false); + + const { user, login, logout } = useAuth(); // from AuthContext + + const protectedPaths = ["/passes", "/whats-included", "/","/melbourne"]; + + const handleOpenLoginModal = () => { + if (!user && protectedPaths.includes(location.pathname)) { + setLoginOpen(true); + } + else if (!user) { + setIsCityDialogOpen(true); // normal city selection + } else if (user) { + setActiveUserDropdown(true) + } + }; // More flexible navigation configuration @@ -642,7 +660,7 @@ export default function Navbar({ {/* Enhanced City Card Button with Source Tracking */}
- {isUserSignedIn && user ? ( + {user ? ( , action: () => { - if (onSignOutClick) { - onSignOutClick(); - } + logout() setActiveUserDropdown(false); } } @@ -698,10 +714,10 @@ export default function Navbar({ ) : (
{ }} className="hover:scale-105 transition-transform duration-200" /> @@ -887,6 +903,13 @@ export default function Navbar({ onClose={handleCloseCityDialog} onCitySelect={handleCitySelect} /> + + { + setLoginOpen(false); + }} + /> ); } \ No newline at end of file