Created the Navigation.jsx

src/common/components/Navigation/Navigation.jsx

@@ -0,0 +1,49 @@
+import LogoDark from "@/common/assets/images/logo/dark.webp";
+import LogoLight from "@/common/assets/images/logo/light.webp";
+
+import {AppBar, Button, IconButton, Link, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import {Menu} from "@mui/icons-material";
+import {useNavigate} from "react-router-dom";
+import routes from "@/common/routes";
+
+const NAVBAR_HEIGHT = 80;
+
+export const Navigation = () => {
+    const navigate = useNavigate();
+
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
+    const isDarkMode = theme.palette.mode === "dark";
+
+    return (
+        <AppBar position="fixed" sx={{height: NAVBAR_HEIGHT, boxShadow: "none", justifyContent: "center",
+            backgroundColor: isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)",
+            backdropFilter: "blur(5px)", WebkitBackdropFilter: "blur(5px)"
+        }}>
+            <Stack direction="row" alignItems="center" justifyContent="space-evenly" flexWrap="wrap">
+                <img src={isDarkMode ? LogoDark : LogoLight} alt="Logo" height={NAVBAR_HEIGHT / 2}/>
+
+                {!isMobile && <>
+                    <Stack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap">
+                        {routes.map((route, index) => <Link key={index} underline="none" sx={{cursor: "pointer"}}
+                                                            onClick={() => navigate(route.path)}>
+                            <Typography variant="h5" sx={{mx: 2}} fontWeight={600}
+                                        color={route.path === window.location.pathname ? "primary.main" : "text.primary"}>
+                                {route.name}
+                            </Typography>
+                        </Link>)}
+                    </Stack>
+
+                    <Button variant="contained">Anmelden</Button>
+                </>}
+
+                {isMobile && <>
+                    <IconButton onClick={() => console.log("Menu")} sx={{mx: 2}}>
+                        <Menu/>
+                    </IconButton>
+                </>}
+
+            </Stack>
+        </AppBar>
+    )
+}