Added badge for item count in basket

01-frontend/src/helper/navbar/NavBar.tsx

@@ -1,7 +1,7 @@
 import AdbIcon from '@mui/icons-material/Adb';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
-import { Autocomplete, TextField } from '@mui/material';
+import { Autocomplete, Badge, TextField } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -22,6 +22,7 @@ import { useAccount } from '../AccountProvider';
 import { fetchItemList } from '../query/Queries';
 import LoginDialog from './LoginDialog';
 import './NavBar.css';
+import { useBasket } from '../BasketProvider';
 
 export default function NavBar() {
     const { t } = useTranslation();
@@ -32,6 +33,11 @@ export default function NavBar() {
 
     const { user, logout } = useAccount();
 
+    const { basket } = useBasket();
+
+    const totalQuantity = basket?.reduce((sum, item) => sum + item.quantity, 0) ?? 0;
+
+
     const [loginOpen, setLoginOpen] = React.useState(false);
     const [loginData, setLoginData] = React.useState({ password: '', email: '', customerId: 0 });
 
@@ -191,15 +197,36 @@ export default function NavBar() {
 
                     <Box sx={{ display: "flex", alignItems: "center", gap: 2, marginLeft: 'auto' }}>
                         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
-                            {pages.map(({ key, label }) => (
-                                <Button
-                                    key={key}
-                                    onClick={() => handleCloseNavMenu(key)}
-                                    sx={{ color: "white", fontWeight: 500 }}
-                                >
-                                    {label}
-                                </Button>
-                            ))}
+                            {pages.map(({ key, label }) => {
+                                if (key === 'checkout') {
+                                    return (
+                                        <Button
+                                            key={key}
+                                            onClick={() => handleCloseNavMenu(key)}
+                                            sx={{ color: "white", fontWeight: 500 }}
+                                        >
+                                            <Badge
+                                                badgeContent={totalQuantity}
+                                                color="error"
+                                                overlap="rectangular"
+                                                showZero={false}
+                                            >
+                                                {label}
+                                            </Badge>
+                                        </Button>
+                                    );
+                                }
+
+                                return (
+                                    <Button
+                                        key={key}
+                                        onClick={() => handleCloseNavMenu(key)}
+                                        sx={{ color: "white", fontWeight: 500 }}
+                                    >
+                                        {label}
+                                    </Button>
+                                );
+                            })}
                         </Box>
 
                         <Box sx={{ display: { xs: "flex", md: "none" } }}>