Added function to appBar Buttons (not search and user)

01-frontend/src/App.tsx

@@ -19,7 +19,7 @@ export default function App() {
           <Route path="/" element={<Home />} />
           <Route path="*" element={<NoPage />} />
           <Route path="/product/:id" element={<Product />} />
-          <Route path="/payment" element={<Payment />} />
+          <Route path="/checkout" element={<Payment />} />
         </Routes>
       </BrowserRouter>
     </BasketProvider>

01-frontend/src/helper/NavBar.tsx

@@ -16,8 +16,8 @@ import { alpha, InputBase, styled } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
 
-const pages = ['Products', 'Pricing', 'Contact'];
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+const pages = ['Categories', 'Checkout', 'Contact'];
+const settings = ['Account', 'Orders', 'Logout'];
 
 const Search = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -73,18 +73,15 @@ export default function NavBar() {
         setAnchorElUser(event.currentTarget);
     };
 
-    const handleCloseNavMenu = () => {
+    const handleCloseNavMenu = (link: string) => {
         setAnchorElNav(null);
+        navigate(`/${link.toLowerCase()}`);
     };
 
     const handleCloseUserMenu = () => {
         setAnchorElUser(null);
     };
 
-    const handleCheckout = () => {
-        navigate('/payment');
-    }
-
 
     return (
         <AppBar>
@@ -147,7 +144,7 @@ export default function NavBar() {
                             sx={{ display: { xs: 'block', md: 'none' } }}
                         >
                             {pages.map((page) => (
-                                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                                <MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
                                     <Typography sx={{ textAlign: 'center' }}>{page}</Typography>
                                 </MenuItem>
                             ))}
@@ -176,23 +173,13 @@ export default function NavBar() {
                         {pages.map((page) => (
                             <Button
                                 key={page}
-                                onClick={handleCloseNavMenu}
+                                onClick={() => handleCloseNavMenu(page)}
                                 sx={{ my: 2, color: 'white', display: 'block' }}
                             >
                                 {page}
                             </Button>
                         ))}
                     </Box>
-                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-                       
-                            <Button
-                                onClick={handleCheckout}
-                                sx={{ my: 2, color: 'white', display: 'block' }}
-                            >
-                                Checkout
-                            </Button>
-            
-                    </Box>
                     <Box sx={{ flexGrow: 0 }}>
                         <Tooltip title="Open settings">
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>