feat(navigation): enhance article category handling and product navigation

- Introduce state management for article categories in App component to track active categories.
- Implement logic to clear article category state when navigating away from article pages.
- Update Product component to navigate to article pages with associated category information in the state.
- Modify Header and CategoryList components to accommodate new category handling logic.
- Ensure ProductCarousel and ProductDetailPage components receive and utilize category IDs for improved product organization.

src/components/Product.js

@@ -7,10 +7,67 @@ import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import AddToCartButton from './AddToCartButton.js';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { withI18n } from '../i18n/withTranslation.js';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
+// Helper function to find level 1 category ID from any category ID
+const findLevel1CategoryId = (categoryId) => {
+  try {
+    const currentLanguage = 'de'; // Default to German
+    const categoryTreeCache = window.categoryService?.getSync(209, currentLanguage);
+
+    if (!categoryTreeCache || !categoryTreeCache.children) {
+      return null;
+    }
+
+    // Helper function to find category by ID and get its level 1 parent
+    const findCategoryAndLevel1 = (categories, targetId) => {
+      for (const category of categories) {
+        if (category.id === targetId) {
+          // Found the category, now find its level 1 parent
+          return findLevel1Parent(categoryTreeCache.children, category);
+        }
+
+        if (category.children && category.children.length > 0) {
+          const result = findCategoryAndLevel1(category.children, targetId);
+          if (result) return result;
+        }
+      }
+      return null;
+    };
+
+    // Helper function to find the level 1 parent (direct child of root category 209)
+    const findLevel1Parent = (level1Categories, category) => {
+      // If this category's parent is 209, it's already level 1
+      if (category.parentId === 209) {
+        return category.id;
+      }
+
+      // Otherwise, find the parent and check if it's level 1
+      for (const level1Category of level1Categories) {
+        if (level1Category.id === category.parentId) {
+          return level1Category.id;
+        }
+
+        // If parent has children, search recursively
+        if (level1Category.children && level1Category.children.length > 0) {
+          const result = findLevel1Parent(level1Category.children, category);
+          if (result) return result;
+        }
+      }
+
+      return null;
+    };
+
+    return findCategoryAndLevel1(categoryTreeCache.children, parseInt(categoryId));
+
+  } catch (error) {
+    console.error('Error finding level 1 category:', error);
+    return null;
+  }
+};
+
 class Product extends Component {
   constructor(props) {
     super(props);
@@ -73,8 +130,25 @@ class Product extends Component {
     // In a real app, this would update a cart state in a parent component or Redux store
   }
 
+  handleProductClick = (e) => {
+    e.preventDefault();
+
+    const { categoryId } = this.props;
+
+    // Find the level 1 category for this product
+    const level1CategoryId = categoryId ? findLevel1CategoryId(categoryId) : null;
+
+    // Navigate to the product page WITH the category information in the state
+    const navigate = this.props.navigate;
+    if (navigate) {
+      navigate(`/Artikel/${this.props.seoName}`, {
+        state: { articleCategoryId: level1CategoryId }
+      });
+    }
+  }
+
   render() {
-    const { 
+    const {
       id, name, price, available, manufacturer, seoName,
       currency, vat, cGrundEinheit, fGrundPreis, thc,
       floweringWeeks,incoming, neu, weight, versandklasse, availableSupplier, komponenten
@@ -253,15 +327,15 @@ class Product extends Component {
           )}
           
           <Box
-            component={Link}
-            to={`/Artikel/${seoName}`}
-            sx={{ 
-              flexGrow: 1, 
-              display: 'flex', 
-              flexDirection: 'column', 
+            onClick={this.handleProductClick}
+            sx={{
+              flexGrow: 1,
+              display: 'flex',
+              flexDirection: 'column',
               alignItems: 'stretch',
               textDecoration: 'none',
-              color: 'inherit'
+              color: 'inherit',
+              cursor: 'pointer'
             }}
           >
             <Box sx={{ 
@@ -420,4 +494,10 @@ class Product extends Component {
   }
 }
 
-export default withI18n()(Product); 
+// Wrapper component to provide navigate hook
+const ProductWithNavigation = (props) => {
+  const navigate = useNavigate();
+  return <Product {...props} navigate={navigate} />;
+};
+
+export default withI18n()(ProductWithNavigation);