@arcblock/ux 3.0.39 → 3.0.42

package/src/NavMenu/products.tsx

@@ -1,20 +1,16 @@
-import { useRef } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, BoxProps, Grid, useTheme } from '@mui/material';
+import { Box, BoxProps, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
 import { useNavMenuContext } from './nav-menu-context';
 import { translate } from '../Locale/util';
 import { useLocaleContext } from '../Locale/context';
-
-import AIKitSvg from './images/ai-kit.svg?react';
+// Arcblock Icons
 import NftStudioSvg from './images/nft-studio.svg?react';
 import CreatorStudioSvg from './images/creator-studio.svg?react';
-import AigneSvg from './images/aigne.svg?react';
-import ArcSphereSvg from './images/arcsphere.svg?react';
-import AistroSvg from './images/aistro.svg?react';
 import BlockletLauncherSvg from './images/blocklet-launcher.svg?react';
 import BlockletStoreSvg from './images/blocklet-store.svg?react';
 import Web3KitSvg from './images/web3-kit.svg?react';
@@ -24,10 +20,14 @@ import BlockletServerSvg from './images/blocklet-server.svg?react';
 import OCAPSvg from './images/OCAP.svg?react';
 import DidSvg from './images/did.svg?react';
 import DidWalletSvg from './images/did-wallet.svg?react';
-import DidNameServiceSvg from './images/did-name-service.svg?react';
 import VCSvg from './images/vc.svg?react';
-import DidConnectSvg from './images/did-connect.svg?react';
 import PaymentKitPng from './images/payment-kit.png';
+// AIGNE Icons
+import AigneSvg from './images/aigne.svg?react';
+import ArcSphereSvg from './images/arcsphere.svg?react';
+import AistroPng from './images/aistro.png';
+
+const MIN_ITEM_CONTENT_WIDTH = 260;
 
 const translations = {
   en: {
@@ -36,6 +36,8 @@ const translations = {
       components: 'Components',
       computeStorage: 'Compute/Storage',
       identity: 'Identity',
+      frameworkTools: 'Framework & tools',
+      modelsAdapters: 'Models adapters',
     },
     products: {
       nftStudio: {
@@ -45,7 +47,7 @@ const translations = {
         description: 'All-in-one creator tool',
       },
       aigne: {
-        description: 'Your AI assistant',
+        description: 'The Agentic Ecosystem for AI Apps',
       },
       arcsphere: {
         description: 'AI native browser',
@@ -98,6 +100,30 @@ const translations = {
       didConnect: {
         description: 'Passwordless login',
       },
+      aigneCodeSmith: {
+        description: 'Review and improve your code with AI',
+      },
+      aigneDocSmith: {
+        description: 'Generate and update docs with AI',
+      },
+      aigneWebSmith: {
+        description: 'Build and deploy AI-powered web apps',
+      },
+      aigneCLI: {
+        description: 'Develop agents from the command line',
+      },
+      aigneObservability: {
+        description: 'Understand and inspect agent behavior',
+      },
+      aigneStudio: {
+        description: 'Create agents visually, no code needed',
+      },
+      aigneFramework: {
+        description: 'The functional core of agentic AI',
+      },
+      aigneHub: {
+        description: 'One API. Any Model',
+      },
     },
   },
   zh: {
@@ -106,6 +132,8 @@ const translations = {
       components: '组件',
       computeStorage: '计算/存储',
       identity: '身份',
+      frameworkTools: '框架与工具',
+      modelsAdapters: '模型适配器',
     },
     products: {
       nftStudio: {
@@ -115,7 +143,7 @@ const translations = {
         description: '一体化创作工具',
       },
       aigne: {
-        description: '您的人工智能助手',
+        description: 'AI 应用的代理生态系统',
       },
       arcsphere: {
         description: 'AI 原生浏览器',
@@ -168,13 +196,35 @@ const translations = {
       didConnect: {
         description: '无密码登录',
       },
+      aigneCodeSmith: {
+        description: '使用 AI 审查并优化你的代码',
+      },
+      aigneDocSmith: {
+        description: '用 AI 生成和更新项目文档',
+      },
+      aigneWebSmith: {
+        description: '构建并部署 AI 驱动的 Web 应用',
+      },
+      aigneCLI: {
+        description: '通过命令行开发 Agent',
+      },
+      aigneObservability: {
+        description: '理解并分析 Agent 的行为',
+      },
+      aigneStudio: {
+        description: '零代码构建 Agent',
+      },
+      aigneFramework: {
+        description: 'Agent AI 的功能核心框架',
+      },
+      aigneHub: {
+        description: '一套 API，连接所有模型',
+      },
     },
   },
 };
 
 const Wrapper = styled(Box)`
-  width: 80vw;
-  max-width: 900px;
   padding: 8px;
   background: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 8px;
@@ -197,259 +247,385 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export interface ProductsProps extends BoxProps {
-  isOpen?: boolean;
+const GridBox = styled(Box, { shouldForwardProp: (prop) => prop !== 'maxContent' })<{ maxContent: number }>(
+  ({ theme, maxContent }) => ({
+    display: 'grid',
+    gap: theme.spacing(1),
+    gridTemplateColumns: `repeat(1, ${maxContent}px)`,
+
+    [theme.breakpoints.up('md')]: {
+      gridTemplateColumns: `repeat(2, ${maxContent}px)`,
+    },
+
+    [theme.breakpoints.up('lg')]: {
+      gridTemplateColumns: `repeat(3, ${maxContent}px)`,
+    },
+  })
+);
+
+interface IconWrapperProps {
+  color?: string;
+  backgroundColor?: string;
+  children: React.ReactNode;
+}
+function IconWrapper({ color = 'black', backgroundColor = 'transparent', children }: IconWrapperProps) {
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color,
+        backgroundColor,
+        borderRadius: '4px',
+      }}>
+      {children}
+    </Box>
+  );
+}
+
+function DIDIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+  return (
+    <IconWrapper color={color} backgroundColor={backgroundColor}>
+      <DidSvg style={{ width: '100%' }} />
+    </IconWrapper>
+  );
 }
 
-// FIXME: @lixl39505 isOpen 没有用，是否要移除？
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function Products({ className, isOpen = undefined, ...rest }: ProductsProps) {
+function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+  return (
+    <IconWrapper color={color} backgroundColor={backgroundColor}>
+      <AigneSvg style={{ width: '100%', height: '100%' }} />
+    </IconWrapper>
+  );
+}
+
+// 智能 Link 组件，根据 URL origin 决定是否在新标签页打开
+interface SmartLinkProps {
+  to: string;
+  children: React.ReactNode;
+  className?: string;
+}
+function SmartLink({ to, children, className = '' }: SmartLinkProps) {
+  const isExternal = () => {
+    try {
+      const url = new URL(to);
+      return url.origin !== window.location.origin;
+    } catch {
+      // 如果 to 不是有效的 URL，则认为是内部链接
+      return false;
+    }
+  };
+
+  if (isExternal()) {
+    return (
+      <Link to={to} target="_blank" rel="noreferrer noopener" className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <Link to={to} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export type ProductsType = 'AIGNE' | 'ARCBLOCK';
+export interface ProductsProps extends BoxProps {
+  type: ProductsType;
+}
+export default function Products({ className = '', type, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
-  const { palette } = useTheme();
-  const wrapperRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
   const { locale = 'en' } = useLocaleContext() || {};
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { palette } = theme;
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+
+  // 添加状态来存储最大内容宽度
+  const [maxContentWidth, setMaxContentWidth] = useState(MIN_ITEM_CONTENT_WIDTH);
+
+  // 计算 item 最大宽度
+  const calculateMaxContentWidth = useMemoizedFn(() => {
+    if (!wrapperRef.current) return;
+
+    const contentElements = wrapperRef.current.querySelectorAll('.navmenu-item__content');
+    let maxWidth = MIN_ITEM_CONTENT_WIDTH; // 默认最小宽度
+
+    contentElements.forEach((element) => {
+      const curWidth = element.getBoundingClientRect().width + 64; // 增加 icon 以及 padding 的宽度
+      if (curWidth > maxWidth) {
+        maxWidth = curWidth;
+      }
+    });
+
+    setMaxContentWidth(maxWidth);
+  });
+
+  // 监听主题、语言、类型变化时重新计算最大宽度
+  useEffect(() => {
+    calculateMaxContentWidth();
+  }, [theme, locale, type, calculateMaxContentWidth]);
+
+  // 监听 navmenu-item__content 元素宽度变化
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const itemContent = wrapperRef.current.querySelector('.navmenu-item__content');
+    if (!itemContent) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxContentWidth();
+    });
+
+    // 监听 item 内容宽度变化（字体改变引起）
+    resizeObserver.observe(itemContent);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [calculateMaxContentWidth]);
+
   const groups = useCreation(() => {
-    return [
-      {
-        type: 'Group',
-        label: t('groups.applications'),
-        children: [
-          {
-            label: (
-              <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                NFT Studio
-              </Link>
-            ),
-            description: t('products.nftStudio.description'),
-            icon: <NftStudioSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
-                target="_blank"
-                rel="noreferrer noopener">
-                Creator Studio
-              </Link>
-            ),
-            description: t('products.creatorStudio.description'),
-            icon: <CreatorStudioSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                Aistro
-              </Link>
-            ),
-            description: t('products.aistro.description'),
-            icon: <AistroSvg />,
-          },
-          {
-            label: (
-              <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
-                AIGNE
-              </Link>
-            ),
-            description: t('products.aigne.description'),
-            icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
-          },
-          {
-            label: (
-              <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                ArcSphere
-              </Link>
-            ),
-            description: t('products.arcsphere.description'),
-            icon: <ArcSphereSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.components'),
-        children: [
-          {
-            label: (
-              <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                Blocklet Launcher
-              </Link>
-            ),
-            description: t('products.blockletLauncher.description'),
-            icon: <BlockletLauncherSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.aikit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                AI Kit
-              </Link>
-            ),
-            description: t('products.aiKit.description'),
-            icon: <AIKitSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
-                Payment Kit
-              </Link>
-            ),
-            description: t('products.paymentKit.description'),
-            icon: <img src={PaymentKitPng} alt="Payment Kit" />,
-          },
-          {
-            label: (
-              <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
-                Blocklet Store
-              </Link>
-            ),
-            description: t('products.blockletStore.description'),
-            icon: <BlockletStoreSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                Web3 Kit
-              </Link>
-            ),
-            description: t('products.web3Kit.description'),
-            icon: <Web3KitSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.computeStorage'),
-        children: [
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
-                target="_blank"
-                rel="noreferrer noopener">
-                Blocklet Framework
-              </Link>
-            ),
-            description: t('products.blockletFramework.description'),
-            icon: <BlockletFrameworkSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Spaces
-              </Link>
-            ),
-            description: t('products.didSpaces.description'),
-            icon: <DidSvg />,
-          },
-          {
-            label: (
-              <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
-                ABT Network
-              </Link>
-            ),
-            description: t('products.abtNetwork.description'),
-            icon: <AbtNetworkSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.blocklet.io/${locale}/blocklet-server`} target="_blank" rel="noreferrer noopener">
-                Blocklet Server
-              </Link>
-            ),
-            description: t('products.blockletServer.description'),
-            icon: <BlockletServerSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
-                target="_blank"
-                rel="noreferrer noopener">
-                ОСАР
-              </Link>
-            ),
-            description: t('products.ocap.description'),
-            icon: <OCAPSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.identity'),
-        children: [
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/did`}
-                target="_blank"
-                rel="noreferrer noopener">
-                DID
-              </Link>
-            ),
-            description: t('products.did.description'),
-            icon: <DidSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Wallet
-              </Link>
-            ),
-            description: t('products.didWallet.description'),
-            icon: <DidWalletSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Names
-              </Link>
-            ),
-            description: t('products.didNameService.description'),
-            icon: <DidNameServiceSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
-                target="_blank"
-                rel="noreferrer noopener">
-                VC
-              </Link>
-            ),
-            description: t('products.vc.description'),
-            icon: <VCSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Connect
-              </Link>
-            ),
-            description: t('products.didConnect.description'),
-            icon: <DidConnectSvg />,
-          },
-        ],
-      },
-    ];
+    if (type === 'ARCBLOCK') {
+      return [
+        {
+          type: 'Group',
+          label: t('groups.applications'),
+          children: [
+            {
+              label: <SmartLink to={`https://www.nftstudio.rocks/${locale}`}>NFT Studio</SmartLink>,
+              description: t('products.nftStudio.description'),
+              icon: <NftStudioSvg />,
+            },
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Creator Studio
+                </Link>
+              ),
+              description: t('products.creatorStudio.description'),
+              icon: <CreatorStudioSvg />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/">AIGNE</SmartLink>,
+              description: t('products.aigne.description'),
+              icon: <AigneIcon color={palette.mode === 'dark' ? 'white' : 'black'} />,
+            },
+            {
+              label: <SmartLink to={`https://www.arcsphere.io/${locale}`}>ArcSphere</SmartLink>,
+              description: t('products.arcsphere.description'),
+              icon: <ArcSphereSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.components'),
+          children: [
+            {
+              label: <SmartLink to={`https://launcher.arcblock.io/${locale}`}>Blocklet Launcher</SmartLink>,
+              description: t('products.blockletLauncher.description'),
+              icon: <BlockletLauncherSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.blocklet.io/${locale}/payment-kit`}>Payment Kit</SmartLink>,
+              description: t('products.paymentKit.description'),
+              icon: <img src={PaymentKitPng} alt="Payment Kit" />,
+            },
+            {
+              label: <SmartLink to={`https://store.blocklet.dev/?locale=${locale}`}>Blocklet Store</SmartLink>,
+              description: t('products.blockletStore.description'),
+              icon: <BlockletStoreSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.web3kit.rocks/${locale}`}>Web3 Kit</SmartLink>,
+              description: t('products.web3Kit.description'),
+              icon: <Web3KitSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.computeStorage'),
+          children: [
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Blocklet Framework
+                </Link>
+              ),
+              description: t('products.blockletFramework.description'),
+              icon: <BlockletFrameworkSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Spaces
+                </Link>
+              ),
+              description: t('products.didSpaces.description'),
+              icon: <DIDIcon color="#876bf4" />,
+            },
+            {
+              label: (
+                <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
+                  ABT Network
+                </Link>
+              ),
+              description: t('products.abtNetwork.description'),
+              icon: <AbtNetworkSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.blocklet.io/${locale}/blocklet-server`}>Blocklet Server</SmartLink>,
+              description: t('products.blockletServer.description'),
+              icon: <BlockletServerSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/ocap`}>ОСАР</SmartLink>,
+              description: t('products.ocap.description'),
+              icon: <OCAPSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.identity'),
+          children: [
+            {
+              label: <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/did`}>DID</SmartLink>,
+              description: t('products.did.description'),
+              icon: <DIDIcon color="#5b96f3" />,
+            },
+            {
+              label: <SmartLink to={`https://www.didwallet.io/${locale}`}>DID Wallet</SmartLink>,
+              description: t('products.didWallet.description'),
+              icon: <DidWalletSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Names
+                </Link>
+              ),
+              description: t('products.didNameService.description'),
+              icon: <DIDIcon color="#678ab0" />,
+            },
+            {
+              label: (
+                <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}>
+                  VC
+                </SmartLink>
+              ),
+              description: t('products.vc.description'),
+              icon: <VCSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.didconnect.io/${locale}`}>DID Connect</SmartLink>,
+              description: t('products.didConnect.description'),
+              icon: <DIDIcon color="#5bbec5" />,
+            },
+          ],
+        },
+      ];
+    }
+
+    if (type === 'AIGNE') {
+      return [
+        {
+          type: 'Group',
+          label: t('groups.applications'),
+          children: [
+            {
+              label: <SmartLink to={`https://www.arcsphere.io/${locale}`}>ArcSphere</SmartLink>,
+              description: t('products.arcsphere.description'),
+              icon: <ArcSphereSvg />,
+            },
+            {
+              label: <SmartLink to={`https://www.aistro.io/${locale}`}>Aistro</SmartLink>,
+              description: t('products.aistro.description'),
+              icon: <img src={AistroPng} alt="Aistro" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/doc-smith">AIGNE CodeSmith</SmartLink>,
+              description: t('products.aigneCodeSmith.description'),
+              icon: <AigneIcon color="#56a596" backgroundColor="#e9fcf6" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/code-smith">AIGNE DocSmith</SmartLink>,
+              description: t('products.aigneDocSmith.description'),
+              icon: <AigneIcon color="#e46f38" backgroundColor="#f7e0d7" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/web-smith">AIGNE WebSmith</SmartLink>,
+              description: t('products.aigneWebSmith.description'),
+              icon: <AigneIcon color="#7c45eb" backgroundColor="#f0e9ff" />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.frameworkTools'),
+          children: [
+            {
+              label: <SmartLink to="https://www.aigne.io/cli">AIGNE CLI</SmartLink>,
+              description: t('products.aigneCLI.description'),
+              icon: <AigneIcon color="#d05d4e" backgroundColor="#faeaea" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/observability">AIGNE Observability</SmartLink>,
+              description: t('products.aigneObservability.description'),
+              icon: <AigneIcon color="#6ba456" backgroundColor="#edfae8" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/studio">AIGNE Studio</SmartLink>,
+              description: t('products.aigneStudio.description'),
+              icon: <AigneIcon color="#676cbf" backgroundColor="#edeeff" />,
+            },
+            {
+              label: <SmartLink to="https://www.aigne.io/framework">AIGNE Framework</SmartLink>,
+              description: t('products.aigneFramework.description'),
+              icon: <AigneIcon color="#5086d0" backgroundColor="#eef4ff" />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.modelsAdapters'),
+          children: [
+            {
+              label: <SmartLink to="https://www.aigne.io/hub">AIGNE Hub</SmartLink>,
+              description: t('products.aigneHub.description'),
+              icon: <AigneIcon color="#e4930b" backgroundColor="#fbf4d4" />,
+            },
+          ],
+        },
+      ];
+    }
+
+    return [];
   }, [t, locale, palette]);
 
   return (
-    <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
+    <Wrapper ref={wrapperRef} className={`nav-menu-products is-${mode} ${className}`} {...rest}>
       {groups.map((group) => (
         <SubItemGroup key={group.label} label={group.label}>
-          <Grid container columnSpacing={1} rowSpacing={1}>
+          <GridBox maxContent={maxContentWidth}>
             {group.children.map((item) => (
-              <Grid
-                key={item.description}
-                size={{
-                  xs: 12,
-                  md: 6,
-                  lg: 4,
-                }}>
-                <Item variant="panel" style={{ padding: '8px' }} {...item} />
-              </Grid>
+              <Item variant="panel" style={{ padding: '8px' }} {...item} />
             ))}
-          </Grid>
+          </GridBox>
         </SubItemGroup>
       ))}
     </Wrapper>