In the menu, we will add a link to the Cart view, and also add a badge that displays the length of the cart array stored in localStorage, in order to visually inform the user of how many items are currently in their cart:
The link for the cart will be similar to the other links in the Menu, with the exception of the Material-UI Badge component that displays the cart length.
mern-marketplace/client/core/Menu.js:
<Link to="/cart"> <Button color={isActive(history, "/cart")}> Cart <Badge color="accent" badgeContent={cart.itemTotal()} > <CartIcon /> </Badge> </Button></Link>
The cart length is returned by the itemTotal helper ...