feat: add product related paths, layouts and contents

- Add productPaths to handle product page layout rendering logic
- Implement ProductLayout for product specific layouts
- Introduce new ProductContent component with product specific details and functionality
- Create new pages and templates for product display and interaction
- Ensure components support product routing and display across the application

src/gatsby-plugin-jaen/components/Layout.tsx

@@ -8,7 +8,8 @@ const Layout: React.FC<LayoutProps> = ({ children, pageProps }) => {
   const path = useLocation().pathname;
   const hiddenTopNavPaths = ['/profile', '/blog-post'];
 
-  const docsPaths = ['/blog'];
+  const blogPaths = ['/blog'];
+  const productPaths = ['/product'];
 
 
   // if (path.startsWith('/admin') || path === '/') {
@@ -19,7 +20,8 @@ const Layout: React.FC<LayoutProps> = ({ children, pageProps }) => {
     <CMSManagement>
       <ContactModalProvider location={{ pathname: path, search: "" }}>
         <AppLayout
-          isBlog={docsPaths.some(docsPath => path.startsWith(docsPath))}
+          isBlog={blogPaths.some(blogPaths => path.startsWith(blogPaths))}
+          isProduct={productPaths.some(productPaths => path.startsWith(productPaths))}
           isCommunity={path.startsWith('/community')}
           path={path}
           // topNavProps={{

src/liba/AppLayout.tsx

@@ -23,10 +23,12 @@ import TbUser from '../shared/components/icons/tabler/TbUser'
 import {useSearch} from '../search/use-search'
 import Navigation from './components/Navigation/Navigation'
 import { GridPattern } from './components/GridPattern'
+import ProductLayout from './ProductLayout'
 
 interface AppLayoutProps {
   children?: React.ReactNode
   isBlog?: boolean
+  isProduct?: boolean
   isCommunity?: boolean
   path?: string
   footer?: FC
@@ -40,6 +42,7 @@ interface AppLayoutProps {
 const AppLayout: FC<AppLayoutProps> = ({
   children,
   isBlog,
+  isProduct,
   isCommunity,
   path,
   footer,
@@ -76,6 +79,12 @@ const AppLayout: FC<AppLayoutProps> = ({
     )
   // } else if (isCommunity) {
   //   childrenElmnt = <CommunityLayout>{children}</CommunityLayout>
+  } else if (isProduct) { 
+    childrenElmnt = (
+      <ProductLayout path={path} isCommunity={isCommunity}>
+        {children}
+      </ProductLayout>
+    )
   } else {
     childrenElmnt = children
   }

src/liba/ProductLayout.tsx

@@ -0,0 +1,57 @@
+import { Box } from '@chakra-ui/react';
+import React, { FC, useMemo, useState } from 'react';
+import LeftNav from '../shared/containers/navigation/LeftNav';
+import MainBreadcrumb from '../shared/containers/navigation/components/MainBreadcrumb';
+import PageDirectory from '../shared/containers/navigation/components/page-directory/PageDirectory';
+import MainGrid from '../shared/containers/components/MainGrid';
+import { useMenuContext } from '../shared/contexts/menu';
+import { MainBreadcrumbPart } from '../shared/types/navigation';
+import { createBreadCrumbParts } from '../shared/utils/navigation';
+
+interface ProductLayoutProps {
+  children?: React.ReactNode;
+  path?: string;
+  isCommunity?: boolean;
+}
+
+const ProductLayout: FC<ProductLayoutProps> = ({ children, path, isCommunity }) => {
+  const { menuStructure } = useMenuContext();
+
+//   const [isExpanded, setIsExpanded] = useState(true);
+
+  const breadcrumbParts: MainBreadcrumbPart[] = useMemo(() => {
+    return [
+      {
+        name: 'Produkte',
+        isDisabled: path === '/product/',
+        href: '/product'
+      },
+      ...createBreadCrumbParts(menuStructure)
+    ];
+  }, [menuStructure]);
+
+  const memoedChildren = useMemo(() => children, [children]);
+
+  return (
+    <MainGrid isLeftNavExpanded={false}>
+      {/* <Box display={{ base: 'none', md: 'block' }} position="sticky">
+        <LeftNav isExpanded={isExpanded} setIsExpanded={setIsExpanded}>
+          <Box w={isExpanded ? 'auto' : 0}>
+            <PageDirectory data={menuStructure} isExpanded={isExpanded} path={path} />
+          </Box>
+        </LeftNav>
+      </Box> */}
+
+      <Box minW="full">
+        {!isCommunity && (
+          <Box overflow="hidden">
+            <MainBreadcrumb parts={breadcrumbParts} />
+          </Box>
+        )}
+        <Box>{memoedChildren}</Box>
+      </Box>
+    </MainGrid>
+  );
+};
+
+export default ProductLayout;