133 lines
4.8 KiB
TypeScript
133 lines
4.8 KiB
TypeScript
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>
|
|
CommunityRentals.App
|
|
</Link>
|
|
<button
|
|
className="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarNav">
|
|
<div className="d-flex align-items-center w-100">
|
|
<div className="position-absolute start-50 translate-middle-x">
|
|
<div className="input-group" style={{ width: '400px' }}>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Search for items to rent..."
|
|
aria-label="Search"
|
|
/>
|
|
<button className="btn btn-outline-secondary" type="button">
|
|
<i className="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="ms-auto d-flex align-items-center">
|
|
<Link className="btn btn-outline-primary btn-sm me-3 text-nowrap" to="/create-item">
|
|
Start Earning
|
|
</Link>
|
|
<ul className="navbar-nav flex-row">
|
|
{user ? (
|
|
<>
|
|
<li className="nav-item dropdown">
|
|
<a
|
|
className="nav-link dropdown-toggle"
|
|
href="#"
|
|
id="navbarDropdown"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i className="bi bi-person-circle me-1"></i>
|
|
{user.firstName}
|
|
</a>
|
|
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li>
|
|
<Link className="dropdown-item" to="/profile">
|
|
<i className="bi bi-person me-2"></i>Profile
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link className="dropdown-item" to="/my-rentals">
|
|
<i className="bi bi-calendar-check me-2"></i>My Rentals
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link className="dropdown-item" to="/my-listings">
|
|
<i className="bi bi-list-ul me-2"></i>My Listings
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link className="dropdown-item" to="/messages">
|
|
<i className="bi bi-envelope me-2"></i>Messages
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<hr className="dropdown-divider" />
|
|
</li>
|
|
<li>
|
|
<button className="dropdown-item" onClick={handleLogout}>
|
|
<i className="bi bi-box-arrow-right me-2"></i>Logout
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<AuthModal
|
|
show={showAuthModal}
|
|
onHide={() => setShowAuthModal(false)}
|
|
initialMode={authModalMode}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar; |