@arcblock/ux 2.12.3 → 2.12.4

package/lib/NavMenu/nav-menu.d.ts

@@ -38,7 +38,7 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
 }
 export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
 export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
-    children?: Array<React.ReactElement> | ((props: {
+    children?: Array<React.ReactElement | null> | ((props: {
         isOpen: boolean;
     }) => React.ReactElement | null);
     expandIcon?: React.ReactNode | ((props: {

package/lib/NavMenu/nav-menu.js

@@ -5,7 +5,8 @@ import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuI
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
-import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
+import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
+import { SubContainer } from './sub-container';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
@@ -73,6 +74,7 @@ function NavMenu({
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
+  const containerWidth = useRef(0);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? {
     marginLeft: '0px'
@@ -96,14 +98,13 @@ function NavMenu({
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
     let leftAllHidden = false;
-    const containerWidth = containerSize?.width || 0;
     const moreIconWidth = moreIconRef.current ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft) : 0;
     itemRefs.current.forEach((item, index) => {
       if (item) {
         item.style.display = 'flex';
         const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
         const currentItemWidth = item.offsetWidth + marginLeft;
-        if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
+        if (containerWidth.current - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
           totalWidthUsed += currentItemWidth;
         } else {
           item.style.display = 'none';
@@ -119,6 +120,7 @@ function NavMenu({
     wait: 100
   });
   useLayoutEffect(() => {
+    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
     if (mode === 'horizontal') {
       checkItemsFit();
     }
@@ -144,8 +146,14 @@ function NavMenu({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeId]);
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
-  const renderItem = (item, index, isTopLevel = false) => {
+  const renderItem = (item, index, level = 0) => {
+    const isTopLevel = level === 0;
     if (item?.children) {
+      // 只渲染两级子菜单
+      if (level > 0) {
+        return null;
+      }
+
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return /*#__PURE__*/_jsx(Sub, {
         id: item.id,
@@ -158,7 +166,7 @@ function NavMenu({
         children: typeof item.children === 'function' ? item.children : item.children.map((childItem, childIndex) => renderItem({
           ...childItem,
           variant: 'panel'
-        }, childIndex, false))
+        }, childIndex, level + 1))
       }, item.id);
     }
 
@@ -175,18 +183,21 @@ function NavMenu({
       } : undefined
     }, item.id);
   };
-  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
+  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1)) : children?.slice(-currentState.hiddenItemCount);
+
+  // 当前展开的子菜单
+  const openedId = currentState.openedIds[0];
   return /*#__PURE__*/_jsx(NavMenuProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(NavMenuRoot, {
+    children: /*#__PURE__*/_jsx(NavMenuStyled, {
       ...rest,
       className: classes,
       $textColor: textColor,
       $bgColor: bgColor,
-      children: /*#__PURE__*/_jsxs(NavMenuList, {
-        className: clsx('navmenu-list', `navmenu-list--${mode}`),
+      children: /*#__PURE__*/_jsxs(NavMenuRoot, {
+        className: clsx('navmenu-root', `navmenu-root--${mode}`),
         ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
+        children: [items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
           icon: icon,
           label: "",
@@ -329,8 +340,7 @@ export const Sub = /*#__PURE__*/forwardRef(({
       children: typeof expandIcon === 'function' ? expandIcon({
         isOpen
       }) : expandIcon
-    }), /*#__PURE__*/_jsx("div", {
-      className: "navmenu-sub__container",
+    }), /*#__PURE__*/_jsx(SubContainer, {
       ...containerProps,
       children: typeof children === 'function' ? children({
         isOpen

package/lib/NavMenu/products.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Box, Grid } from '@mui/material';
-import { useWindowSize } from 'react-use';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -1437,10 +1436,6 @@ export default function Products({
     mode
   } = useNavMenuContext();
   const wrapperRef = useRef(null);
-  const {
-    width,
-    height
-  } = useWindowSize();
   const {
     locale = 'en'
   } = useLocaleContext() || {};
@@ -1452,6 +1447,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.nftstudio.rocks/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "NFT Studio"
         }),
         description: t('products.nftStudio.description'),
@@ -1459,6 +1456,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/creator-studio`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Creator Studio"
         }),
         description: t('products.creatorStudio.description'),
@@ -1466,6 +1465,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aigne.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "AIGNE"
         }),
         description: t('products.aigne.description'),
@@ -1473,6 +1474,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aistro.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Aistro"
         }),
         description: t('products.aistro.description'),
@@ -1484,6 +1487,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://launcher.arcblock.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Launcher"
         }),
         description: t('products.blockletLauncher.description'),
@@ -1491,6 +1496,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/ai-kit`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Al Kit"
         }),
         description: t('products.alKit.description'),
@@ -1498,6 +1505,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://store.blocklet.dev/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Store"
         }),
         description: t('products.blockletStore.description'),
@@ -1505,6 +1514,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.web3kit.rocks/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Web3 Kit"
         }),
         description: t('products.web3Kit.description'),
@@ -1516,6 +1527,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blocklet`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Framework"
         }),
         description: t('products.blockletFramework.description'),
@@ -1523,6 +1536,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didspaces.com/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Spaces"
         }),
         description: t('products.didSpaces.description'),
@@ -1530,6 +1545,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://main.abtnetwork.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "ABT Network"
         }),
         description: t('products.abtNetwork.description'),
@@ -1537,6 +1554,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blocklet-server`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Server"
         }),
         description: t('products.blockletServer.description'),
@@ -1544,6 +1563,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blockchain`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "\u041E\u0421\u0410\u0420"
         }),
         description: t('products.osar.description'),
@@ -1555,6 +1576,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/did`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID"
         }),
         description: t('products.did.description'),
@@ -1562,6 +1585,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didwallet.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Wallet"
         }),
         description: t('products.didWallet.description'),
@@ -1569,13 +1594,17 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didnames.io/${locale}`,
-          children: "DID Name Service"
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: "DID Names"
         }),
         description: t('products.didNameService.description'),
         icon: /*#__PURE__*/_jsx(DidNameServiceSvg, {})
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/verifiable-credential`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "VC"
         }),
         description: t('products.vc.description'),
@@ -1583,6 +1612,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didconnect.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Connect"
         }),
         description: t('products.didConnect.description'),
@@ -1590,26 +1621,6 @@ export default function Products({
       }]]
     }];
   }, [t, locale]);
-
-  // 防止弹框超出 window
-  useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    if (!isOpen) {
-      wrapper.style.transform = '';
-      return;
-    }
-    const rect = wrapper.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    if (rect.right > windowWidth) {
-      const offset = rect.right - windowWidth;
-      wrapper.style.transform = `translateX(-${offset + 16}px)`;
-    } else if (rect.left < 0) {
-      wrapper.style.transform = `translateX(${Math.abs(rect.left) + 16}px)`;
-    } else {
-      wrapper.style.transform = '';
-    }
-  }, [width, height, isOpen]);
   return /*#__PURE__*/_jsx(Wrapper, {
     ref: wrapperRef,
     className: `is-${mode} ${className}`,

package/lib/NavMenu/style.d.ts

@@ -2,8 +2,8 @@ type NavMenuProps = {
     $bgColor: string;
     $textColor: string;
 };
-export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const NavMenuList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const NavMenuStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 type NavMenuItemProps = {
     $activeTextColor: string;
 };

package/lib/NavMenu/style.js

@@ -1,12 +1,13 @@
 import { styled } from '../Theme';
-// .navmenu-root
-export const NavMenuRoot = styled('nav', {
+// .navmenu
+export const NavMenuStyled = styled('nav', {
   shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
 })(({
   $bgColor,
   $textColor
 }) => ({
-  padding: '8px 16px',
+  position: 'relative',
+  padding: '0 16px',
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
@@ -15,15 +16,15 @@ export const NavMenuRoot = styled('nav', {
   fontSize: '16px'
 }));
 
-// .navmenu-list
-export const NavMenuList = styled('ul')(() => ({
+// .navmenu-root
+export const NavMenuRoot = styled('ul')(() => ({
   listStyle: 'none',
   margin: 0,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
   // inline 布局
-  '&.navmenu-list--inline ': {
+  '&.navmenu-root--inline ': {
     flexDirection: 'column',
     alignItems: 'stretch'
   }
@@ -32,15 +33,18 @@ export const NavMenuList = styled('ul')(() => ({
 export const NavMenuItem = styled('li', {
   shouldForwardProp: prop => prop !== '$activeTextColor'
 })(({
-  $activeTextColor
+  $activeTextColor,
+  theme
 }) => ({
   display: 'flex',
   alignItems: 'center',
   position: 'relative',
-  padding: '0 12px',
+  padding: '8px 12px',
   whiteSpace: 'nowrap',
   cursor: 'pointer',
-  transition: 'color 0.2s ease-in-out',
+  transition: theme.transitions.create('color', {
+    duration: theme.transitions.duration.standard
+  }),
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0
@@ -93,7 +97,9 @@ export const NavMenuItem = styled('li', {
       marginLeft: '6px',
       fontSize: '14px',
       opacity: 0,
-      transition: 'opacity 0.2s ease-in-out'
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.standard
+      })
     }
   },
   '.navmenu-item__desc': {
@@ -131,13 +137,17 @@ export const NavMenuItem = styled('li', {
     },
     '&:hover': {
       background: '#f9f9fb',
-      transition: 'background 0.2s ease-in-out',
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.standard
+      }),
       '.navmenu-item__label-arrow': {
         opacity: 1
       },
       '.navmenu-item__desc': {
         color: '#26292e',
-        transition: 'color 0.2s ease-in-out'
+        transition: theme.transitions.create('color', {
+          duration: theme.transitions.duration.standard
+        })
       }
     },
     '&.navmenu-item--active': {
@@ -155,24 +165,28 @@ export const NavMenuItem = styled('li', {
 }));
 
 // 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(() => ({
+export const NavMenuSub = styled(NavMenuItem)(({
+  theme
+}) => ({
   '.navmenu-item': {
-    marginLeft: 0
+    marginLeft: 0,
+    overflow: 'hidden'
   },
   '& .navmenu-sub__container': {
-    visibility: 'hidden',
+    pointerEvents: 'none',
     opacity: 0,
     position: 'absolute',
     top: '100%',
-    left: '50%',
-    zIndex: 1,
-    transform: 'translateX(-50%)',
-    paddingTop: '16px',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out'
+    left: 0,
+    zIndex: 1
   },
   '&.navmenu-sub--opened > .navmenu-sub__container': {
-    visibility: 'visible',
-    opacity: 1
+    pointerEvents: 'auto',
+    opacity: 1,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeOut
+    })
   },
   // 扩展图标
   '.navmenu-sub__expand-icon': {
@@ -183,7 +197,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
     '& > *': {
       width: '0.8em',
       height: '0.8em',
-      transition: 'transform 0.2s ease-in-out'
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.standard
+      })
     },
     '.navmenu-item--inline &': {
       marginLeft: 'auto'
@@ -199,7 +215,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       height: 0,
       overflow: 'hidden',
-      transition: 'height 0.2s ease-in-out'
+      transition: theme.transitions.create('height', {
+        duration: theme.transitions.duration.standard
+      })
     },
     '&.navmenu-sub--opened > .navmenu-sub__container': {
       height: 'auto'
@@ -208,11 +226,14 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       paddingLeft: '16px',
       boxShadow: 'none'
+    },
+    '.navmenu-item__content': {
+      height: '48px'
     }
   }
 }));
 
-// 下拉子菜单 .navmenu-sub-list
+// 下拉子菜单 .navmenu-sub__list
 export const NavMenuSubList = styled('ul')(() => ({
   margin: 0,
   padding: '16px',

package/lib/NavMenu/sub-container.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function SubContainer({ children, ...props }: SubContainerProps): import("react/jsx-runtime").JSX.Element;
+export default SubContainer;

package/lib/NavMenu/sub-container.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+const paddingTop = 8;
+
+// 下拉子菜单容器
+export function SubContainer({
+  children,
+  ...props
+}) {
+  const rootRef = useRef(null);
+  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
+
+  const updatePosition = () => {
+    if (!rootRef.current) return;
+    const anchor = rootRef.current.parentElement; // 以父容器作为参照
+    if (!anchor) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const containerRect = rootRef.current.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const padding = 32;
+
+    // 1. 计算相对于父元素的水平居中位置
+    let left = (anchorRect.width - containerRect.width) / 2;
+
+    // 2. 检查容器在视口中的绝对位置
+    const absoluteLeft = anchorRect.left + left;
+
+    // 3. 调整水平位置确保不超出窗口
+    if (absoluteLeft < 0) {
+      // 如果超出左边界，向右偏移
+      left = left - absoluteLeft + padding;
+    } else if (absoluteLeft + containerRect.width > windowWidth) {
+      // 如果超出右边界，向左偏移
+      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+    }
+    setPosition(left);
+  };
+
+  // 监听自身大小变化
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition();
+    });
+    resizeObserver.observe(rootRef.current);
+    return () => resizeObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 anchor 的大小变化
+  useEffect(() => {
+    const anchor = rootRef.current?.parentElement;
+    let resizeObserver = null;
+    if (anchor) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(anchor);
+    }
+    return () => resizeObserver?.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      updatePosition();
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: rootRef,
+    className: "navmenu-sub__container",
+    style: {
+      paddingTop: `${paddingTop}px`,
+      transform: `translateX(${position}px)`
+    },
+    ...props,
+    children: children
+  });
+}
+export default SubContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.3",
+  "version": "2.12.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "d0ad7fcbd9bbae010ad58235494150e3c0814d43",
+  "gitHead": "f8648a2f55bb57212a24a5948a5f026e2c20b1a7",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.3",
-    "@arcblock/nft-display": "^2.12.3",
-    "@arcblock/react-hooks": "^2.12.3",
+    "@arcblock/icons": "^2.12.4",
+    "@arcblock/nft-display": "^2.12.4",
+    "@arcblock/react-hooks": "^2.12.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/NavMenu/nav-menu.tsx

@@ -5,7 +5,8 @@ import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuI
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
-import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
+import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
+import { SubContainer } from './sub-container';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children: React.ReactNode) {
@@ -67,7 +68,6 @@ function NavMenu({
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-
   const currentState = useReactive({
     activeId,
     openedIds: [] as string[],
@@ -112,6 +112,7 @@ function NavMenu({
   const navMenuRef = useRef<HTMLUListElement | null>(null);
   const itemRefs = useRef<HTMLElement[]>([]);
   const moreIconRef = useRef<HTMLLIElement | null>(null);
+  const containerWidth = useRef(0);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? { marginLeft: '0px' } : undefined;
 
@@ -136,7 +137,6 @@ function NavMenu({
       let totalWidthUsed = 0;
       let newHiddenCount = 0;
       let leftAllHidden = false;
-      const containerWidth = containerSize?.width || 0;
       const moreIconWidth = moreIconRef.current
         ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft)
         : 0;
@@ -147,7 +147,7 @@ function NavMenu({
           const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
           const currentItemWidth = item.offsetWidth + marginLeft;
 
-          if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
+          if (containerWidth.current - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
             totalWidthUsed += currentItemWidth;
           } else {
             item.style.display = 'none';
@@ -165,6 +165,7 @@ function NavMenu({
   );
 
   useLayoutEffect(() => {
+    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
     if (mode === 'horizontal') {
       checkItemsFit();
     }
@@ -195,8 +196,15 @@ function NavMenu({
 
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
 
-  const renderItem = (item: ItemOptions, index: number, isTopLevel = false) => {
+  const renderItem = (item: ItemOptions, index: number, level = 0) => {
+    const isTopLevel = level === 0;
+
     if (item?.children) {
+      // 只渲染两级子菜单
+      if (level > 0) {
+        return null;
+      }
+
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return (
         <Sub
@@ -215,7 +223,7 @@ function NavMenu({
           {typeof item.children === 'function'
             ? item.children
             : item.children.map((childItem, childIndex: number) =>
-                renderItem({ ...childItem, variant: 'panel' }, childIndex, false)
+                renderItem({ ...childItem, variant: 'panel' }, childIndex, level + 1)
               )}
         </Sub>
       );
@@ -243,21 +251,24 @@ function NavMenu({
   };
 
   const content = items
-    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index))
+    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1))
     : children?.slice(-currentState.hiddenItemCount);
 
+  // 当前展开的子菜单
+  const openedId = currentState.openedIds[0];
+
   return (
     <NavMenuProvider value={contextValue}>
-      <NavMenuRoot {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
-        <NavMenuList className={clsx('navmenu-list', `navmenu-list--${mode}`)} ref={navMenuRef}>
-          {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || [])}
+      <NavMenuStyled {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
+        <NavMenuRoot className={clsx('navmenu-root', `navmenu-root--${mode}`)} ref={navMenuRef}>
+          {items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (
             <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
               {content}
             </Sub>
           )}
-        </NavMenuList>
-      </NavMenuRoot>
+        </NavMenuRoot>
+      </NavMenuStyled>
     </NavMenuProvider>
   );
 }
@@ -324,7 +335,7 @@ export const Item = forwardRef<HTMLLIElement, ItemProps>(
 Item.displayName = 'NavMenu.Item';
 
 export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
-  children?: Array<React.ReactElement> | ((props: { isOpen: boolean }) => React.ReactElement | null);
+  children?: Array<React.ReactElement | null> | ((props: { isOpen: boolean }) => React.ReactElement | null);
   expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
 }
 
@@ -394,13 +405,13 @@ export const Sub = forwardRef<HTMLLIElement, SubProps>(
             {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
           </span>
         )}
-        <div className="navmenu-sub__container" {...containerProps}>
+        <SubContainer {...containerProps}>
           {typeof children === 'function' ? (
             children({ isOpen }) // 自定义渲染
           ) : (
             <NavMenuSubList className="navmenu-sub__list">{filterItems(children)}</NavMenuSubList>
           )}
-        </div>
+        </SubContainer>
       </NavMenuSub>
     );
   }

package/src/NavMenu/products.tsx

@@ -1,8 +1,7 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Box, BoxProps, Grid } from '@mui/material';
-import { useWindowSize } from 'react-use';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -191,7 +190,6 @@ export interface ProductsProps extends BoxProps {
 export default function Products({ className, isOpen, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { width, height } = useWindowSize();
   const { locale = 'en' } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
   const groups = useCreation(() => {
@@ -202,13 +200,22 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://www.nftstudio.rocks/${locale}`}>NFT Studio</Link>,
+              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`}>Creator Studio</Link>
+                <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 />,
@@ -216,12 +223,20 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           ],
           [
             {
-              label: <Link to={`https://www.aigne.io/${locale}`}>AIGNE</Link>,
+              label: (
+                <Link to={`https://www.aigne.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  AIGNE
+                </Link>
+              ),
               description: t('products.aigne.description'),
               icon: <AigneSvg />,
             },
             {
-              label: <Link to={`https://www.aistro.io/${locale}`}>Aistro</Link>,
+              label: (
+                <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Aistro
+                </Link>
+              ),
               description: t('products.aistro.description'),
               icon: <AistroSvg />,
             },
@@ -234,24 +249,43 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://launcher.arcblock.io/${locale}`}>Blocklet Launcher</Link>,
+              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.arcblock.io/content/collections/${locale}/ai-kit`}>Al Kit</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/ai-kit`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Al Kit
+                </Link>
+              ),
               description: t('products.alKit.description'),
               icon: <AIKitSvg />,
             },
           ],
           [
             {
-              label: <Link to={`https://store.blocklet.dev/${locale}`}>Blocklet Store</Link>,
+              label: (
+                <Link to={`https://store.blocklet.dev/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Blocklet Store
+                </Link>
+              ),
               description: t('products.blockletStore.description'),
               icon: <BlockletStoreSvg />,
             },
             {
-              label: <Link to={`https://www.web3kit.rocks/${locale}`}>Web3 Kit</Link>,
+              label: (
+                <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Web3 Kit
+                </Link>
+              ),
               description: t('products.web3Kit.description'),
               icon: <Web3KitSvg />,
             },
@@ -265,18 +299,31 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           [
             {
               label: (
-                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}>Blocklet Framework</Link>
+                <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}`}>DID Spaces</Link>,
+              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/${locale}`}>ABT Network</Link>,
+              label: (
+                <Link to={`https://main.abtnetwork.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  ABT Network
+                </Link>
+              ),
               description: t('products.abtNetwork.description'),
               icon: <AbtNetworkSvg />,
             },
@@ -284,7 +331,10 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           [
             {
               label: (
-                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}>
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}
+                  target="_blank"
+                  rel="noreferrer noopener">
                   Blocklet Server
                 </Link>
               ),
@@ -292,7 +342,14 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
               icon: <BlockletServerSvg />,
             },
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}>ОСАР</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  ОСАР
+                </Link>
+              ),
               description: t('products.osar.description'),
               icon: <OCAPSvg />,
             },
@@ -305,29 +362,55 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/did`}>DID</Link>,
+              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}`}>DID Wallet</Link>,
+              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}`}>DID Name Service</Link>,
+              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`}>VC</Link>,
+              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}`}>DID Connect</Link>,
+              label: (
+                <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Connect
+                </Link>
+              ),
               description: t('products.didConnect.description'),
               icon: <DidConnectSvg />,
             },
@@ -337,27 +420,6 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
     ];
   }, [t, locale]);
 
-  // 防止弹框超出 window
-  useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    if (!isOpen) {
-      wrapper.style.transform = '';
-      return;
-    }
-
-    const rect = wrapper.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    if (rect.right > windowWidth) {
-      const offset = rect.right - windowWidth;
-      wrapper.style.transform = `translateX(-${offset + 16}px)`;
-    } else if (rect.left < 0) {
-      wrapper.style.transform = `translateX(${Math.abs(rect.left) + 16}px)`;
-    } else {
-      wrapper.style.transform = '';
-    }
-  }, [width, height, isOpen]);
-
   return (
     <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
       {groups.map((group) => (

package/src/NavMenu/style.ts

@@ -5,11 +5,12 @@ type NavMenuProps = {
   $textColor: string;
 };
 
-// .navmenu-root
-export const NavMenuRoot = styled('nav', {
+// .navmenu
+export const NavMenuStyled = styled('nav', {
   shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
 })<NavMenuProps>(({ $bgColor, $textColor }) => ({
-  padding: '8px 16px',
+  position: 'relative',
+  padding: '0 16px',
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
@@ -18,15 +19,15 @@ export const NavMenuRoot = styled('nav', {
   fontSize: '16px',
 }));
 
-// .navmenu-list
-export const NavMenuList = styled('ul')(() => ({
+// .navmenu-root
+export const NavMenuRoot = styled('ul')(() => ({
   listStyle: 'none',
   margin: 0,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
   // inline 布局
-  '&.navmenu-list--inline ': {
+  '&.navmenu-root--inline ': {
     flexDirection: 'column',
     alignItems: 'stretch',
   },
@@ -38,14 +39,16 @@ type NavMenuItemProps = {
 // 菜单项 .navmenu-item
 export const NavMenuItem = styled('li', {
   shouldForwardProp: (prop) => prop !== '$activeTextColor',
-})<NavMenuItemProps>(({ $activeTextColor }) => ({
+})<NavMenuItemProps>(({ $activeTextColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
   position: 'relative',
-  padding: '0 12px',
+  padding: '8px 12px',
   whiteSpace: 'nowrap',
   cursor: 'pointer',
-  transition: 'color 0.2s ease-in-out',
+  transition: theme.transitions.create('color', {
+    duration: theme.transitions.duration.standard,
+  }),
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0,
@@ -98,7 +101,9 @@ export const NavMenuItem = styled('li', {
       marginLeft: '6px',
       fontSize: '14px',
       opacity: 0,
-      transition: 'opacity 0.2s ease-in-out',
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
   },
   '.navmenu-item__desc': {
@@ -136,13 +141,17 @@ export const NavMenuItem = styled('li', {
     },
     '&:hover': {
       background: '#f9f9fb',
-      transition: 'background 0.2s ease-in-out',
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.standard,
+      }),
       '.navmenu-item__label-arrow': {
         opacity: 1,
       },
       '.navmenu-item__desc': {
         color: '#26292e',
-        transition: 'color 0.2s ease-in-out',
+        transition: theme.transitions.create('color', {
+          duration: theme.transitions.duration.standard,
+        }),
       },
     },
     '&.navmenu-item--active': {
@@ -160,24 +169,26 @@ export const NavMenuItem = styled('li', {
 }));
 
 // 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(() => ({
+export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
   '.navmenu-item': {
     marginLeft: 0,
+    overflow: 'hidden',
   },
   '& .navmenu-sub__container': {
-    visibility: 'hidden',
+    pointerEvents: 'none',
     opacity: 0,
     position: 'absolute',
     top: '100%',
-    left: '50%',
+    left: 0,
     zIndex: 1,
-    transform: 'translateX(-50%)',
-    paddingTop: '16px',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
   },
   '&.navmenu-sub--opened > .navmenu-sub__container': {
-    visibility: 'visible',
+    pointerEvents: 'auto',
     opacity: 1,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeOut,
+    }),
   },
   // 扩展图标
   '.navmenu-sub__expand-icon': {
@@ -188,7 +199,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
     '& > *': {
       width: '0.8em',
       height: '0.8em',
-      transition: 'transform 0.2s ease-in-out',
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '.navmenu-item--inline &': {
       marginLeft: 'auto',
@@ -204,7 +217,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       height: 0,
       overflow: 'hidden',
-      transition: 'height 0.2s ease-in-out',
+      transition: theme.transitions.create('height', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '&.navmenu-sub--opened > .navmenu-sub__container': {
       height: 'auto',
@@ -214,10 +229,13 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       paddingLeft: '16px',
       boxShadow: 'none',
     },
+    '.navmenu-item__content': {
+      height: '48px',
+    },
   },
 }));
 
-// 下拉子菜单 .navmenu-sub-list
+// 下拉子菜单 .navmenu-sub__list
 export const NavMenuSubList = styled('ul')(() => ({
   margin: 0,
   padding: '16px',

package/src/NavMenu/sub-container.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const paddingTop = 8;
+
+// 下拉子菜单容器
+export function SubContainer({ children, ...props }: SubContainerProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
+
+  const updatePosition = () => {
+    if (!rootRef.current) return;
+    const anchor = rootRef.current.parentElement; // 以父容器作为参照
+    if (!anchor) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const containerRect = rootRef.current.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const padding = 32;
+
+    // 1. 计算相对于父元素的水平居中位置
+    let left = (anchorRect.width - containerRect.width) / 2;
+
+    // 2. 检查容器在视口中的绝对位置
+    const absoluteLeft = anchorRect.left + left;
+
+    // 3. 调整水平位置确保不超出窗口
+    if (absoluteLeft < 0) {
+      // 如果超出左边界，向右偏移
+      left = left - absoluteLeft + padding;
+    } else if (absoluteLeft + containerRect.width > windowWidth) {
+      // 如果超出右边界，向左偏移
+      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+    }
+
+    setPosition(left);
+  };
+
+  // 监听自身大小变化
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition();
+    });
+
+    resizeObserver.observe(rootRef.current!);
+
+    return () => resizeObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 anchor 的大小变化
+  useEffect(() => {
+    const anchor = rootRef.current?.parentElement;
+    let resizeObserver: ResizeObserver | null = null;
+
+    if (anchor) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+
+      resizeObserver.observe(anchor);
+    }
+
+    return () => resizeObserver?.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      updatePosition();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className="navmenu-sub__container"
+      style={{
+        paddingTop: `${paddingTop}px`,
+        transform: `translateX(${position}px)`,
+      }}
+      {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default SubContainer;