Click here to Skip to main content
15,498,943 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
import React, { useContext } from "react";
import { Link, useLocation } from "react-router-dom";
import { OrderContext } from "../../../context/orderContext";
import { getSumOfArray } from "../../../service/helper";
import { Cart, Product, Person, Receipt } from "../../../utility/icons";

const BottomNavigation = (props) => {
	const { hidden, handleAccount } = props;
	const { state } = useContext(OrderContext);
	const location = useLocation();
	const badgeCount = getSumOfArray(state?.invoices?.map(invoice => invoice.quantity));


	const getActivePaths = () => {
		switch (location.pathname) {
			case '/settings':
			case '/contact':
			case '/termsandconditions':
            case '/privacypolicy':
            case '/accessibility':
				return 'text-secondary group-hover:text-secondary'
			default:
				return 'text-black group-hover:text-black'
		}
	}

	const handleClick = () => {
		handleAccount();
	}

	return (
		<div className="fixed w-full bottom-0 border-t border-gray-50 bg-white z-10" hidden={hidden}>
			<nav className="flex justify-evenly align-items-center h-16" aria-label="tabs">
				<Link to='/menu' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
					<Product fill={'none'} stroke={location.pathname === '/menu' ? '#751132' : 'black'} className={`flex align-content-center stroke-0 primary-icon h-7 w-7`} aria-hidden="false" role="button" aria-label="Shop Icon - Menu Selection  Page" />
				</Link>
				<Link to='/order' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
					<Cart fill={'none'} stroke={location.pathname === '/order' || location.pathname === '/payment' || location.pathname === '/orderreview'  ? '#751132' : 'black'} className={`flex align-content-center h-7 w-7 primary-icon`} aria-hidden="false" role="button" aria-label="Cart Icon - Items Are In The Cart" />
					{
					badgeCount > 0 &&
					<span className="absolute top-4 ml-6 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">{badgeCount}</span>
					}			
				</Link>
				<Link to='/purchasehistory' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
					<Receipt fill={'none'} stroke={location.pathname === '/purchasehistory' ? '#751132' : 'black'} className={`flex align-content-center h-7 w-7 primary-icon`} aria-hidden="false" role="button" aria-label="Receipt Icon - Review Processed Order(s)" />
				</Link>
				<button className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`} onClick={handleClick} >
					<span className="sr-only">Open sidebar</span>
					<Person className={`flex align-content-center h-7 w-7 primary-icon  ${getActivePaths()}`} aria-hidden="false" role="link" aria-label="Avatar Icon - User Profile" />
				</button>
			</nav>
		</div>
	)
}

export default BottomNavigation;


What I have tried:

I tried to make an array object but the cart icons got duplicated.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900