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

@@ -5,7 +5,7 @@ import {
   Route,
   Navigate,
   useLocation,
-  useNavigate,
+  useNavigate
 } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -82,6 +82,9 @@ const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
   const [authVersion, setAuthVersion] = useState(0);
   // @note Theme customizer state for development mode
   const [isThemeCustomizerOpen, setThemeCustomizerOpen] = useState(false);
+  // State to track active category for article pages
+  const [articleCategoryId, setArticleCategoryId] = useState(null);
+
 
   // Remove duplicate theme state since it's passed as prop
   // const [dynamicTheme, setDynamicTheme] = useState(createTheme(defaultTheme));
@@ -112,10 +115,44 @@ const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
     };
   }, []);
 
-  // Extract categoryId from pathname if on category route
+  // Clear article category when navigating away from article pages
+  useEffect(() => {
+    const isArticlePage = location.pathname.startsWith('/Artikel/');
+    const isCategoryPage = location.pathname.startsWith('/Kategorie/');
+    const isHomePage = location.pathname === '/';
+
+    // Only clear article category when navigating to non-article pages
+    // (but keep it when going from category to article)
+    if (!isArticlePage && !isCategoryPage && !isHomePage) {
+      setArticleCategoryId(null);
+    }
+  }, [location.pathname]);
+
+  // Read article category from navigation state (when coming from product click)
+  useEffect(() => {
+    if (location.state && location.state.articleCategoryId !== undefined) {
+      if (location.state.articleCategoryId !== null) {
+        setArticleCategoryId(location.state.articleCategoryId);
+      }
+      // Clear the state so it doesn't persist on page refresh
+      navigate(location.pathname, { replace: true, state: {} });
+    }
+  }, [location.state, navigate, location.pathname]);
+
+  // Extract categoryId from pathname if on category route, or use article category
   const getCategoryId = () => {
     const match = location.pathname.match(/^\/Kategorie\/(.+)$/);
-    return match ? match[1] : null;
+    if (match) {
+      return match[1];
+    }
+
+    // For article pages, use the article category if available
+    const isArticlePage = location.pathname.startsWith('/Artikel/');
+    if (isArticlePage && articleCategoryId) {
+      return articleCategoryId;
+    }
+
+    return null;
   };
 
   const categoryId = getCategoryId();