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

Comments, appointments adjustments, fixed some issues

Browse Source
This commit is contained in:
augmentedpotato
2026-04-20 19:19:30 -06:00
parent 1523aef51e
commit 6d593726a5
34 changed files with 402 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/Navigation.js
View File

@@ -7,11 +7,13 @@ import { useEffect, useState } from "react";
import { useAuth } from "@/context/AuthContext";
import { useCart } from "@/context/CartContext";
//Shared CSS class strings for nav links and buttons
const drawerLinkCls = "block text-[#2f2f2f] no-underline text-[1.05rem] font-medium px-2 py-[0.65rem] rounded-md transition-colors hover:bg-[rgba(47,47,47,0.1)]";
const navLinkCls = "text-[#2f2f2f] no-underline text-[1.05rem] font-semibold px-4 py-2 rounded-md transition-all duration-[250ms] hover:bg-white/25";
const cartBtnCls = "relative inline-flex items-center text-[1.4rem] no-underline mr-2 px-[0.4rem] py-[0.2rem] rounded-md transition-colors hover:bg-white/20";
const cartBadgeCls = "absolute -top-1 -right-1.5 bg-[#e53935] text-white rounded-full text-[0.65rem] font-bold min-w-[18px] h-[18px] flex items-center justify-center px-[3px] leading-none";
//Cart icon with a red badge showing the number of items
function CartIcon({ itemCount, onClick }) {
return (
<Link href="/cart" className={`${cartBtnCls} group`} aria-label="Cart" onClick={onClick}>
@@ -26,6 +28,7 @@ function CartIcon({ itemCount, onClick }) {
);
}
//Top navigation bar - desktop links on the left, store selector and auth on the right, hamburger menu on mobile
export default function DisplayNav() {
const { user, logout, loading } = useAuth();
const { itemCount, selectedStoreId, setStoreId } = useCart();
@@ -33,6 +36,7 @@ export default function DisplayNav() {
const [stores, setStores] = useState([]);
const [menuOpen, setMenuOpen] = useState(false);
//Loads the store list for the store selector dropdown
useEffect(() => {
fetch("/api/v1/stores?size=100")
.then((r) => (r.ok ? r.json() : null))
@@ -40,6 +44,7 @@ export default function DisplayNav() {
.catch(() => {});
}, []);
//Logs out and sends the user to the home page
function handleLogout() {
logout();
router.push("/");
@@ -48,6 +53,7 @@ export default function DisplayNav() {
function closeMenu() { setMenuOpen(false); }
//Store selector dropdown, shared between desktop and mobile layouts
const storeSelect = (extraCls = "") => stores.length > 0 && (
<select
className={`bg-[rgba(47,47,47,0.1)] text-[#2f2f2f] border border-[rgba(47,47,47,0.35)] rounded-md px-[0.6rem] py-[0.3rem] text-[0.9rem] cursor-pointer outline-none transition-colors hover:bg-[rgba(47,47,47,0.2)] ${extraCls}`}