refactor: nav refactor

d3george · Nov 7, 2024 · b709fcf · b709fcf
1 parent 12c1fca
commit b709fcf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 54 deletions.
diff --git a/src/layouts/dashboard/nav/nav-mini.tsx b/src/layouts/dashboard/nav/nav-mini.tsx
@@ -0,0 +1,3 @@
+export default function NavMini() {
+  return <div>NavMini</div>;
+}
diff --git a/src/layouts/dashboard/nav/nav-vertical.tsx b/src/layouts/dashboard/nav/nav-vertical.tsx
@@ -24,6 +24,7 @@ type Props = {
   closeSideBarDrawer?: () => void;
 };
 export default function NavVertical(props: Props) {
+  console.log('NavVertical');
   const navigate = useNavigate();
   const matches = useMatches();
   const { colorBgElevated, colorBorder } = useThemeToken();
@@ -47,15 +48,12 @@ export default function NavVertical(props: Props) {
   const selectedKeys = useMemo(() => [pathname], [pathname]);
 
   const [openKeys, setOpenKeys] = useState<string[]>([]);
-
   useEffect(() => {
-    if (!collapsed) {
-      const keys = matches
-        .filter((match) => match.pathname !== '/')
-        .filter((match) => match.pathname !== pathname)
-        .map((match) => match.pathname);
-      setOpenKeys(keys);
-    }
+    if (collapsed) return;
+    const keys = matches
+      .filter((match) => match.pathname !== '/' && match.pathname !== pathname)
+      .map((match) => match.pathname);
+    setOpenKeys(keys);
   }, [matches, pathname, collapsed]);
 
   const handleToggleCollapsed = () => {
@@ -65,12 +63,8 @@ export default function NavVertical(props: Props) {
     });
   };
 
-  const onClick: MenuProps['onClick'] = ({ key, keyPath }) => {
-    console.log('click', key, keyPath);
-    const nextLink = flattenedRoutes?.find((el) => el.key === key);
-    // Handle special case for external links in menu items
-    // For external links: skip internal routing, avoid adding new tab in current project,
-    // prevent selecting current route, and open link in new browser tab
+  const onClick: MenuProps['onClick'] = ({ key }) => {
+    const nextLink = flattenedRoutes?.find((e) => e.key === key);
     if (nextLink?.hideTab && nextLink?.frameSrc) {
       window.open(nextLink?.frameSrc, '_blank');
       return;
@@ -81,9 +75,7 @@ export default function NavVertical(props: Props) {
   };
 
   const handleOpenChange: MenuProps['onOpenChange'] = (keys) => {
-    if (!collapsed) {
-      setOpenKeys(keys);
-    }
+    setOpenKeys(keys);
   };
 
   return (
@@ -100,12 +92,12 @@ export default function NavVertical(props: Props) {
           mode="inline"
           inlineCollapsed={collapsed}
           items={menuList}
-          {...(!collapsed && { openKeys })}
           selectedKeys={selectedKeys}
+          {...(!collapsed && { openKeys })}
           style={{ backgroundColor: colorBgElevated }}
           className="h-full !border-none"
-          onClick={onClick}
           onOpenChange={handleOpenChange}
+          onClick={onClick}
         />
       </Scrollbar>
     </div>

diff --git a/src/router/hooks/use-route-to-menu.tsx b/src/router/hooks/use-route-to-menu.tsx
@@ -2,60 +2,57 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Iconify, SvgIcon } from '@/components/icon';
-import { useSettings } from '@/store/settingStore';
 
-import { ThemeLayout } from '#/enum';
 import { AppRouteObject } from '#/router';
 import type { GetProp, MenuProps } from 'antd';
 
 type MenuItem = GetProp<MenuProps, 'items'>[number];
 
+const renderIcon = (icon: string | React.ReactNode): React.ReactNode => {
+  if (typeof icon !== 'string') return icon;
+
+  return icon.startsWith('ic') ? (
+    <SvgIcon icon={icon} size={24} className="ant-menu-item-icon" />
+  ) : (
+    <Iconify icon={icon} size={24} className="ant-menu-item-icon" />
+  );
+};
+
+const renderLabel = (label: string, suffix: React.ReactNode, t: (key: string) => string) => {
+  return (
+    <div className="flex items-center">
+      <div>{t(label)}</div>
+      {suffix}
+    </div>
+  );
+};
+
 /**
  *   routes -> menus
  */
 export function useRouteToMenuFn() {
   const { t } = useTranslation();
-  const { themeLayout } = useSettings();
+
   const routeToMenuFn = useCallback(
-    (items: AppRouteObject[]) => {
+    (items: AppRouteObject[]): MenuItem[] => {
       return items
         .filter((item) => !item.meta?.hideMenu)
         .map((item) => {
-          const menuItem: any = [];
           const { meta, children } = item;
-          if (meta) {
-            const { key, label, icon, disabled, suffix } = meta;
-            menuItem.key = key;
-            menuItem.disabled = disabled;
-            menuItem.label = (
-              <div
-                className={`inline-flex items-center ${
-                  themeLayout === ThemeLayout.Horizontal ? 'justify-start' : 'justify-between'
-                } `}
-              >
-                <div className="">{t(label)}</div>
-                {suffix}
-              </div>
-            );
-            if (icon) {
-              if (typeof icon === 'string') {
-                if (icon.startsWith('ic')) {
-                  menuItem.icon = <SvgIcon icon={icon} size={24} className="ant-menu-item-icon" />;
-                } else {
-                  menuItem.icon = <Iconify icon={icon} size={24} className="ant-menu-item-icon" />;
-                }
-              } else {
-                menuItem.icon = icon;
-              }
-            }
-          }
-          if (children) {
-            menuItem.children = routeToMenuFn(children);
-          }
+          if (!meta) return {} as MenuItem;
+
+          const menuItem: Partial<MenuItem> = {
+            key: meta.key,
+            disabled: meta.disabled,
+            label: renderLabel(meta.label, meta.suffix, t),
+            ...(meta.icon && { icon: renderIcon(meta.icon) }),
+            ...(children && { children: routeToMenuFn(children) }),
+          };
+
           return menuItem as MenuItem;
         });
     },
-    [t, themeLayout],
+    [t],
   );
   return routeToMenuFn;
 }