From 436bf8da5e9c96f49917f1057d1b2edfe8d483af Mon Sep 17 00:00:00 2001
From: FlorianSpeicher <flo200538@gmail.com>
Date: Thu, 22 May 2025 13:09:41 +0200
Subject: [PATCH] Added Link to dummy account and orders page in navbar

---
 01-frontend/src/App.tsx           |  4 ++++
 01-frontend/src/helper/NavBar.tsx |  5 +++--
 01-frontend/src/pages/Account.tsx | 34 +++++++++++++++++++++++++++++++
 01-frontend/src/pages/Orders.tsx  | 34 +++++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 01-frontend/src/pages/Account.tsx
 create mode 100644 01-frontend/src/pages/Orders.tsx

diff --git a/01-frontend/src/App.tsx b/01-frontend/src/App.tsx
index 90da10d..1408b3d 100644
--- a/01-frontend/src/App.tsx
+++ b/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>
diff --git a/01-frontend/src/helper/NavBar.tsx b/01-frontend/src/helper/NavBar.tsx
index 5a3f376..f204eb3 100644
--- a/01-frontend/src/helper/NavBar.tsx
+++ b/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>
                             ))}
diff --git a/01-frontend/src/pages/Account.tsx b/01-frontend/src/pages/Account.tsx
new file mode 100644
index 0000000..42034ed
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/01-frontend/src/pages/Orders.tsx b/01-frontend/src/pages/Orders.tsx
new file mode 100644
index 0000000..113d987
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file