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/ProductDetailPage.js

@@ -62,6 +62,7 @@ class ProductDetailPage extends Component {
 
     if (cachedData) {
       // Complete cached data found
+
       // Clean up prerender fallback since we have cached data
       if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
         delete window.__PRERENDER_FALLBACK__;
@@ -110,7 +111,7 @@ class ProductDetailPage extends Component {
     } else if (partialProduct && isUpgrading) {
       // Partial product data found - enter upgrading state
       console.log("ProductDetailPage: Found partial product data, entering upgrading state");
-      
+
       // Clean up prerender fallback since we have some data
       if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
         delete window.__PRERENDER_FALLBACK__;
@@ -581,7 +582,7 @@ class ProductDetailPage extends Component {
           // Cache the complete response data (product + attributes) - cache the response with translated product
           const cacheData = { ...res, product: productData };
           window.productDetailCache[cacheKey] = cacheData;
-          
+
           // Clean up prerender fallback since we now have real data
           if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
             delete window.__PRERENDER_FALLBACK__;
@@ -900,10 +901,10 @@ class ProductDetailPage extends Component {
             mb: 2,
             position: ["-webkit-sticky", "sticky"], // Provide both prefixed and standard
             top: {
-              xs: "80px",
-              sm: "80px",
-              md: "80px",
-              lg: "80px",
+              xs: "110px",
+              sm: "110px",
+              md: "110px",
+              lg: "110px",
             } /* Offset to sit below the header 120 mith menu for md and lg*/,
             left: 0,
             width: "100%",
@@ -1681,6 +1682,7 @@ class ProductDetailPage extends Component {
                       availableSupplier={product.availableSupplier}
                       komponenten={product.komponenten}
                       rebate={product.rebate}
+                      categoryId={product.kategorien ? product.kategorien.split(',')[0] : undefined}
                       priority={index < 6 ? 'high' : 'auto'}
                       t={this.props.t}
                     />