RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cart fixes (backend), adjusted header, added footer, mobile formatting updates

Browse Source
This commit is contained in:
augmentedpotato
2026-04-14 05:24:40 -06:00
parent 5bd1933ea6
commit 4c3c11995a
14 changed files with 776 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/components/Navigation.js
View File

@@ -12,6 +12,7 @@ export default function DisplayNav() {
const { itemCount, selectedStoreId, setStoreId } = useCart();
const router = useRouter();
const [stores, setStores] = useState([]);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
if (!token) return;
@@ -26,27 +27,35 @@ export default function DisplayNav() {
function handleLogout() {
logout();
router.push("/");
setMenuOpen(false);
}
function closeMenu() {
setMenuOpen(false);
}
return (
<nav className="navbar">
<Image
className="mx-3"
src="/logo_simple.png"
alt="store_logo"
width={50}
height={50}
id="logo"
/>
<Link href="/" onClick={closeMenu}>
<Image
className="mx-3"
src="/logo_simple.png"
alt="store_logo"
width={50}
height={50}
id="logo"
/>
</Link>
{/* Desktop: inline links + auth */}
<div className="nav-links">
<Link href="/" className="nav-link">Home</Link>
<Link href="/adopt" className="nav-link">Adopt a Pet</Link>
<Link href="/products" className="nav-link">Online Store</Link>
<Link href="/appointments" className="nav-link">Schedule an Appointment</Link>
<Link href="/ai-chat" className="nav-link">AI Assistant</Link>
<Link href="/contact" className="nav-link">Contact Us</Link>
<Link href="/about" className="nav-link">About Us</Link>
<Link href="/adopt" className="nav-link">Adopt</Link>
<Link href="/products" className="nav-link">Store</Link>
<Link href="/appointments" className="nav-link">Appointments</Link>
<Link href="/ai-chat" className="nav-link">Help</Link>
<Link href="/contact" className="nav-link">Contact</Link>
<Link href="/about" className="nav-link">About</Link>
</div>
<div className="nav-auth">
@@ -77,7 +86,7 @@ export default function DisplayNav() {
{loading ? null : user ? (
<>
<Link href="/profile" className="nav-link nav-greeting">
Hello, {user.fullName || user.username}
Hello, {(user.fullName || user.username).split(" ")[0]}
</Link>
<button type="button" className="nav-logout-btn" onClick={handleLogout}>
Log Out
@@ -90,6 +99,74 @@ export default function DisplayNav() {
</>
)}
</div>
{/* Mobile: cart icon + hamburger always in topbar */}
<div className="nav-mobile-bar">
{user && (
<Link href="/cart" className="nav-cart-btn" aria-label="Cart" onClick={closeMenu}>
🛒
{itemCount > 0 && (
<span className="nav-cart-badge">{itemCount > 99 ? "99+" : itemCount}</span>
)}
</Link>
)}
<button
className={`nav-hamburger${menuOpen ? " nav-hamburger--open" : ""}`}
aria-label="Toggle navigation menu"
aria-expanded={menuOpen}
onClick={() => setMenuOpen((o) => !o)}
>
<span />
<span />
<span />
</button>
</div>
{/* Mobile dropdown drawer */}
{menuOpen && (
<div className="nav-drawer">
<Link href="/" className="nav-drawer-link" onClick={closeMenu}>Home</Link>
<Link href="/adopt" className="nav-drawer-link" onClick={closeMenu}>Adopt</Link>
<Link href="/products" className="nav-drawer-link" onClick={closeMenu}>Store</Link>
<Link href="/appointments" className="nav-drawer-link" onClick={closeMenu}>Appointments</Link>
<Link href="/ai-chat" className="nav-drawer-link" onClick={closeMenu}>Help</Link>
<Link href="/contact" className="nav-drawer-link" onClick={closeMenu}>Contact</Link>
<Link href="/about" className="nav-drawer-link" onClick={closeMenu}>About</Link>
<div className="nav-drawer-divider" />
{stores.length > 0 && (
<select
className="nav-store-select nav-store-select--drawer"
value={selectedStoreId ?? ""}
onChange={(e) => { setStoreId(e.target.value || null); closeMenu(); }}
>
<option value="">All Stores</option>
{stores.map((s) => (
<option key={s.storeId} value={s.storeId}>
{s.storeName}
</option>
))}
</select>
)}
{loading ? null : user ? (
<>
<Link href="/profile" className="nav-drawer-link" onClick={closeMenu}>
My Profile ({user.fullName || user.username})
</Link>
<button type="button" className="nav-logout-btn nav-logout-btn--drawer" onClick={handleLogout}>
Log Out
</button>
</>
) : (
<>
<Link href="/login" className="nav-drawer-link" onClick={closeMenu}>Log In</Link>
<Link href="/register" className="nav-drawer-link nav-drawer-link--register" onClick={closeMenu}>Register</Link>
</>
)}
</div>
)}
</nav>
);
}