feat(prerender): add 'Neuheiten' category and update data fetching logic

- Introduce a new category 'Neuheiten' to the rendering process by appending it to the existing categories.
- Modify the data fetching logic to handle the 'neu' category ID correctly.
- Enhance the UI by adding a button for the 'Neuheiten' category in the CategoryList component, complete with styling and internationalization support.

prerender.cjs

@@ -525,7 +525,14 @@ const renderApp = async (categoryData, socket) => {
     let categoryPagesRendered = 0;
     let categoriesWithProducts = 0;
 
-    for (const category of allCategories) {
+    const allCategoriesPlusNeu = [...allCategories, {
+      id: "neu",
+      name: "Neuheiten",
+      seoName: "neu",
+      parentId: 209
+    }];
+
+    for (const category of allCategoriesPlusNeu) {
       // Skip categories without seoName
       if (!category.seoName) {
         console.log(

prerender/data-fetching.cjs

@@ -39,7 +39,7 @@ const fetchCategoryProducts = (socket, categoryId) => {
 
     socket.emit(
       "getCategoryProducts",
-      { full:true, categoryId: parseInt(categoryId) },
+      { full:true, categoryId: categoryId === "neu" ? "neu" : parseInt(categoryId) },
       (response) => {
         clearTimeout(timeout);
         if (response && response.products !== undefined) {

src/components/header/CategoryList.js

@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import Collapse from "@mui/material/Collapse";
 import { Link } from "react-router-dom";
 import HomeIcon from "@mui/icons-material/Home";
+import FiberNewIcon from '@mui/icons-material/FiberNew';
 import SettingsIcon from "@mui/icons-material/Settings";
 import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
@@ -246,6 +247,65 @@ class CategoryList extends Component {
             )}
           </Button>
 
+          <Button
+            component={Link}
+            to="/Kategorie/neu"
+            color="inherit"
+            size="small"
+            aria-label="Neuheiten"
+            onClick={isMobile ? this.handleMobileCategoryClick : undefined}
+            sx={{
+              fontSize: "0.75rem",
+              textTransform: "none",
+              whiteSpace: "nowrap",
+              opacity: 0.9,
+              mx: isMobile ? 0 : 0.5,
+              my: 0.25,
+              minWidth: isMobile ? "100%" : "auto",
+              borderRadius: 1,
+              justifyContent: isMobile ? "flex-start" : "center",
+              transition: "all 0.2s ease",
+              textShadow: "0 1px 2px rgba(0,0,0,0.3)",
+              position: "relative"
+            }}
+          >
+            <FiberNewIcon sx={{ 
+              fontSize: "1rem", 
+              mr: isMobile ? 1 : 0          
+            }} />
+            {isMobile && (
+              <Box sx={{ position: "relative", display: "inline-block" }}>
+                {/* Bold text (always rendered to set width) */}
+                <Box
+                  className="bold-text"
+                  sx={{
+                    fontWeight: "bold",
+                    color: "transparent",
+                    position: "relative",
+                    zIndex: 2,
+                  }}
+                >
+                  {this.props.t ? this.props.t('navigation.new') : 'Neuheiten'}
+                </Box>
+                {/* Thin text (positioned on top) */}
+                <Box
+                  className="thin-text"
+                  sx={{
+                    fontWeight: "400",
+                    color: "inherit",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                  }}
+                >
+                  {this.props.t ? this.props.t('navigation.new') : 'Neuheiten'}
+                </Box>
+              </Box>
+            )}
+          </Button>
+
+
         {categories.length > 0 ? (
           <>
             {categories.map((category) => {