Added Link to dummy account and orders page in navbar

01-frontend/src/App.tsx

@@ -11,6 +11,8 @@ import Category from './pages/Category';
 import { BasketProvider } from './helper/BasketProvider';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { green } from '@mui/material/colors';
+import Orders from './pages/Orders';
+import Account from './pages/Account';
 
 export default function App() {
 
@@ -34,6 +36,8 @@ export default function App() {
           <Route path="/checkout" element={<Payment />} />
           <Route path="/categories" element={<Category />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path='/account' element={<Account />} />
+          <Route path='/orders' element={<Orders />} />
         </Routes>
       </BrowserRouter>
     </BasketProvider>

01-frontend/src/helper/NavBar.tsx

@@ -78,8 +78,9 @@ export default function NavBar() {
         navigate(`/${link.toLowerCase()}`);
     };
 
-    const handleCloseUserMenu = () => {
+    const handleCloseUserMenu = (link: string) => {
         setAnchorElUser(null);
+        navigate(`/${link.toLowerCase()}`);
     };
 
 
@@ -203,7 +204,7 @@ export default function NavBar() {
                             onClose={handleCloseUserMenu}
                         >
                             {settings.map((setting) => (
-                                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                                <MenuItem key={setting} onClick={() => handleCloseUserMenu(setting)}>
                                     <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
                                 </MenuItem>
                             ))}

01-frontend/src/pages/Account.tsx

@@ -0,0 +1,34 @@
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import "./pages.css";
+
+export default function Account() {
+    const navigate = useNavigate();
+
+    const handleGoHome = () => {
+        navigate("/");
+    };
+
+    return (
+        <Box className="no-page-container">
+            <Typography variant="h1" className="no-page-title">
+                Account
+            </Typography>
+            <Typography variant="h5" className="no-page-subtitle">
+                Oops! The page you're looking for doesn't exist.
+            </Typography>
+            <Typography variant="body1" className="no-page-description">
+                It seems you may have taken a wrong turn. Let's get you back on track.
+            </Typography>
+            <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                className="no-page-button"
+                onClick={handleGoHome}
+            >
+                Go Back to Home
+            </Button>
+        </Box>
+    );
+}

01-frontend/src/pages/Orders.tsx

@@ -0,0 +1,34 @@
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import "./pages.css";
+
+export default function Orders() {
+    const navigate = useNavigate();
+
+    const handleGoHome = () => {
+        navigate("/");
+    };
+
+    return (
+        <Box className="no-page-container">
+            <Typography variant="h1" className="no-page-title">
+                Orders
+            </Typography>
+            <Typography variant="h5" className="no-page-subtitle">
+                Oops! The page you're looking for doesn't exist.
+            </Typography>
+            <Typography variant="body1" className="no-page-description">
+                It seems you may have taken a wrong turn. Let's get you back on track.
+            </Typography>
+            <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                className="no-page-button"
+                onClick={handleGoHome}
+            >
+                Go Back to Home
+            </Button>
+        </Box>
+    );
+}