Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page rework

Browse Source
This commit is contained in:
jackiettran
2025-07-18 22:07:53 -04:00
parent f289022b5d
commit e65c53e6aa
4 changed files with 336 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/src/components/Navbar.tsx
View File

@@ -13,7 +13,7 @@ const Navbar: React.FC = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div className="container">
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
<Link className="navbar-brand fw-bold" to="/">
<i className="bi bi-box-seam me-2"></i>
Rentall
@@ -30,82 +30,88 @@ const Navbar: React.FC = () => {
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav me-auto">
<li className="nav-item">
<Link className="nav-link" to="/items">
Browse Items
<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>
</li>
{user && (
<li className="nav-item">
<Link className="nav-link" to="/create-item">
List an Item
</Link>
</li>
)}
</ul>
<ul className="navbar-nav">
{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
<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 me-2">
<Link className="btn btn-outline-secondary btn-sm text-nowrap" to="/login">
Login
</Link>
</li>
<li>
<Link className="dropdown-item" to="/my-rentals">
<i className="bi bi-calendar-check me-2"></i>My Rentals
<li className="nav-item">
<Link className="btn btn-primary btn-sm text-nowrap" to="/register">
Sign Up
</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">
<Link className="nav-link" to="/login">
Login
</Link>
</li>
<li className="nav-item">
<Link className="btn btn-primary btn-sm ms-2" to="/register">
Sign Up
</Link>
</li>
</>
)}
</ul>
</>
)}
</ul>
</div>
</div>
</div>
</div>
</nav>