@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/default-theme/menu/AppMenuComponents/collapsed/CollapsedSidebarItem.tsx

@@ -0,0 +1,254 @@
+import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { IMenuItem } from '../interfaces';
+import {
+    ListItemButton,
+    ListItemButtonProps,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+} from '@mui/material';
+import { useLocation, useNavigate } from 'react-router';
+import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import { useDispatch } from 'react-redux';
+import isCurrentPath from '../../../../hooks/isCurrentPath';
+import { NavEventManager } from '../../../../utils/navEvents';
+import { SidebarPosition } from '../../AppSidebarMaterial';
+import { FORCE_CLICK_OPEN, SUBMENU_SCROLL_THRESHOLD } from '../submenuConstants';
+import SubmenuPortal from '../SubmenuPortal';
+
+export interface ICollapsedSidebarItem {
+    item: IMenuItem;
+    navSize: 'large' | 'small';
+    navExpanded: boolean;
+    level: number;
+    sidebarPosition?: SidebarPosition;
+}
+
+export interface ISidebarItem extends ListItemButtonProps, PropsWithChildren {
+    item: IMenuItem;
+    showIcon?: boolean;
+    showText?: boolean;
+    navExpanded?: boolean;
+    navSize: 'large' | 'small';
+    level: number,
+    hasChildren?: boolean;
+}
+
+const SidebarItem: FC<ISidebarItem> = (props) => {
+    const {
+        item,
+        showIcon = true,
+        showText = true,
+        children,
+        navExpanded,
+        navSize,
+        level,
+        hasChildren = false,
+        onClick,
+        ...rest
+    } = props;
+
+    const loc = useLocation();
+
+    const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
+
+    useEffect(() => {
+        setCurrent(isCurrentPath(loc.pathname, item));
+    }, [loc]);
+
+    const navigate = useNavigate();
+
+    const dispatch = useDispatch();
+
+    const updatePageState = () => {
+        const newPageState: IPageState = {
+            title: item?.label,
+            icon: item?.icon,
+            subTitle: item?.group,
+        };
+        dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
+    };
+
+    return (
+        <ListItemButton
+            {...rest}
+            selected={isCurrent}
+            onClick={(e) => {
+               
+                if(onClick) {
+                   
+                    onClick(e);
+                }
+
+                //e.preventDefault();
+                e.stopPropagation();
+                //if ((e.target as any)?.localName === 'svg') return;
+
+                if (!hasChildren) {
+                    if (!isCurrentPath(loc.pathname, item)) {
+                        updatePageState();
+                        navigate(item.to);
+                        return;
+                    }
+                }
+
+              
+            }}
+        >
+            {showIcon && <ListItemIcon>{item.icon && item.icon}</ListItemIcon>}
+            {(showText && level > 0) && (
+                <ListItemText>{item.label}</ListItemText>
+            )}
+            {children}
+        </ListItemButton>
+    );
+};
+
+const CollapsedSidebarItem = ({
+    item,
+    navSize,
+    navExpanded,
+    level,
+    sidebarPosition = "left"
+}: ICollapsedSidebarItem) => {
+    const hovering = useRef<boolean>(false);
+    const timeoutDuration = 20;
+    let timeout;
+    const [webView, setWebView] = useState<boolean>(false);
+    const [open, setOpen] = useState(false);
+    const itemRef = useRef<HTMLDivElement>(null);
+    
+    // Unique key for this submenu to identify it in accordion behavior
+    const submenuKey = `collapsed-${item.key || item.label}`;
+
+    const openMenuOnHover = (event) => {
+        // Notify other submenus to close (accordion behavior)
+        NavEventManager.notifySubmenuOpened(submenuKey);
+        setOpen(true);
+    };
+
+    const openMenuOnClick = (event) => {
+        if (!open) {
+            // Notify other submenus to close (accordion behavior)
+            NavEventManager.notifySubmenuOpened(submenuKey);
+        }
+        setOpen(prevOpen => !prevOpen);
+    };
+
+    const closeMenu = (event) => {
+        if (!webView) {
+            setOpen(false);
+        }
+    };
+
+    useEffect(() => {
+        if (document.body.classList.contains('webview')) {
+            setWebView(true)
+        } else {
+            setWebView(false)
+        }
+    }, []);
+    
+    // Listen for other submenus opening and close this one (accordion behavior)
+    useEffect(() => {
+        const unsubscribeSubmenuOpened = NavEventManager.onSubmenuOpened((openedKey) => {
+            // Close this submenu if a different one was opened
+            if (openedKey !== submenuKey && open) {
+                setOpen(false);
+            }
+        });
+        
+        const unsubscribeCloseAll = NavEventManager.onCloseAllSubmenus(() => {
+            setOpen(false);
+        });
+        
+        return () => {
+            unsubscribeSubmenuOpened();
+            unsubscribeCloseAll();
+        };
+    }, [submenuKey, open]);
+
+    const hasChildren = item.children && item.children.length > 0;
+
+    // Helper to close submenu after item click - navigation is handled by SidebarItem
+    const handleSubmenuItemClick = (e, childItem) => {
+        // Close the dropdown menu after a short delay to allow navigation to complete
+        setTimeout(() => {
+            setOpen(false);
+            // Close the drawer on mobile
+            NavEventManager.closeDrawer();
+        }, 100);
+    };
+
+    return hasChildren ? (
+        <>
+            <div ref={itemRef}>
+                <SidebarItem
+                    aria-owns={open ? 'menu-' + item.key : undefined}
+                    aria-haspopup='true'
+                    onMouseEnter={!webView && !FORCE_CLICK_OPEN ? openMenuOnHover : null}
+                    onMouseLeave={!FORCE_CLICK_OPEN ? closeMenu : null}
+                    onClick={webView || FORCE_CLICK_OPEN ? openMenuOnClick : null}
+                    item={item}
+                    showText={false}
+                    navSize={navSize}
+                    navExpanded={navExpanded}
+                    level={level}
+                    hasChildren={hasChildren}
+                >
+                    <SubmenuPortal
+                        open={open}
+                        itemRef={itemRef}
+                        sidebarPosition={sidebarPosition}
+                        childrenCount={item.children?.length || 0}
+                        className="sidebar-collapsed-menu"
+                    >
+                        <ul
+                            id={'menu-' + item.key}
+                            key={'menu-' + item.key}
+                            className={`dropdown ${open ? 'show' : ''}`}
+                            style={{
+                                margin: 0,
+                                padding: 0,
+                                listStyle: 'none',
+                            }}
+                        >
+                            {item.children?.map((item, index) => {
+                                return (
+                                    <SidebarItem
+                                        navSize={navSize}
+                                        navExpanded={navExpanded}
+                                        level={level + 1}
+                                        item={item}
+                                        key={index}
+                                        hasChildren={item.children && item.children.length > 0}
+                                        onClick={(e) => handleSubmenuItemClick(e, item)}
+                                        onTouchStart={(e) => e.stopPropagation()}
+                                    />
+                                );
+                            })}
+                        </ul>
+                    </SubmenuPortal>
+                </SidebarItem>
+            </div>
+        </>
+    ) : (
+        <SidebarItem
+            item={item}
+            navSize={navSize}
+            navExpanded={navExpanded}
+            level={level}
+            hasChildren={false}
+            onClick={() => {
+                // Close all other submenus first
+                NavEventManager.closeAllSubmenus();
+                // Close drawer when clicking primary level item without children
+                setTimeout(() => {
+                    NavEventManager.closeDrawer();
+                }, 100);
+            }}
+        />
+    );
+};
+
+export default CollapsedSidebarItem;

package/src/default-theme/menu/AppMenuComponents/collapsed/CollapsedSidebarItems.tsx

@@ -0,0 +1,31 @@
+import { List } from '@mui/material';
+import { IMenuItem } from '../interfaces';
+import CollapsedSidebarItem from './CollapsedSidebarItem';
+import { SidebarPosition } from '../../AppSidebarMaterial';
+
+export interface ICollapsedSidebarItems {
+	items: IMenuItem[];
+	navSize: 'large' | 'small';
+	navExpanded: boolean;
+	level: number;
+	sidebarPosition?: SidebarPosition;
+}
+
+const CollapsedSidebarItems: React.FC<ICollapsedSidebarItems> = ({ items, navSize, navExpanded, level, sidebarPosition = "left" }) => {
+	return (
+		<List className={'sidebar-list sidebar-collapsed-menu'} component='nav'>
+			{items.map((item, index) => {
+				return <CollapsedSidebarItem 
+									level={level} 
+									item={item} 
+									key={index} 	
+									navSize={navSize}
+									navExpanded={navExpanded}
+									sidebarPosition={sidebarPosition}
+				/>
+			})}
+		</List>
+	);
+};
+
+export default CollapsedSidebarItems;

package/src/default-theme/menu/AppMenuComponents/expanded/CollapsableSidebarMenu.tsx

@@ -0,0 +1,276 @@
+import { ICollapsableSidebarMenu } from '../interfaces';
+import { useDispatch } from 'react-redux';
+import { memo, useEffect, useState, useRef } from 'react';
+import isCurrentPath from '../../../../hooks/isCurrentPath';
+import { useLocation, useNavigate } from 'react-router';
+import {
+  Collapse,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from '@mui/material';
+import ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined';
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
+import SidebarItem from './SidebarItem';
+
+/** @ts-ignore */
+//import clickSound from '@app/assets/sounds/click2.mp3?string';
+import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import {DASHAppConstants} from 'dash-constants';
+import { NavEventManager } from '../../../../utils/navEvents';
+import { FORCE_CLICK_OPEN } from '../submenuConstants';
+import SubmenuPortal from '../SubmenuPortal';
+
+const CollapsableSidebarMenu = ({
+  item,
+  navExpanded,
+  navSize,
+  level,
+  sidebarPosition = "left"
+}: ICollapsableSidebarMenu) => {
+  const loc = useLocation();
+  const dispatch = useDispatch();
+  const itemRef = useRef<HTMLDivElement>(null);
+  const isHorizontal = sidebarPosition === "top" || sidebarPosition === "bottom";
+  
+  // Detect if running in mobile webview or android
+  const [webView, setWebView] = useState<boolean>(false);
+  
+  useEffect(() => {
+    if (document.body.classList.contains('webview') || document.body.classList.contains('android')) {
+      setWebView(true);
+    } else {
+      setWebView(false);
+    }
+  }, []);
+
+  const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
+
+  const [localOpen, setLocalOpen] = useState<boolean>(
+    isCurrentPath(loc.pathname, item),
+  );
+
+  // Generate a unique key for this submenu
+  const submenuKey = `${item.group}-${item.key}`;
+
+  /* This hook is to open the menu on load only, memo state will not rerender this twice */
+  useEffect(() => {
+    setLocalOpen(isCurrentPath(loc.pathname, item));
+  }, []);
+
+  // Listen for other submenus opening (accordion behavior)
+  useEffect(() => {
+    const unsubscribe = NavEventManager.onSubmenuOpened((openedKey: string) => {
+      // If another submenu opened (not this one), close this one
+      if (openedKey !== submenuKey) {
+        setLocalOpen(false);
+      }
+    });
+
+    // Also listen for close all submenus event
+    const unsubscribeCloseAll = NavEventManager.onCloseAllSubmenus(() => {
+      setLocalOpen(false);
+    });
+
+    return () => {
+      unsubscribe();
+      unsubscribeCloseAll();
+    };
+  }, [submenuKey, navSize]);
+
+  const navigate = useNavigate();
+
+  const playClick = () => {
+    if (!!DASHAppConstants.system.UI_SOUNDS) {
+      // const audio = new Audio(clickSound);
+      // audio.load();
+      // audio.play();
+    }
+  };
+
+  const updatePageState = () => {
+    const newPageState: IPageState = {
+      title: item?.label,
+      icon: item?.icon,
+      subTitle: item?.group,
+    };
+    dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
+  };
+
+  // Handle expand/collapse icon click
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    playClick();
+    const newState = !localOpen;
+    setLocalOpen(newState);
+    
+    // Notify other submenus to close (accordion behavior)
+    if (newState) {
+      NavEventManager.notifySubmenuOpened(submenuKey);
+    }
+  };
+
+  // Handle opening submenu - notify others to close (for click mode)
+  const handleOpenSubmenu = () => {
+    const newState = !localOpen;
+    setLocalOpen(newState);
+    
+    // Notify other submenus to close (accordion behavior)
+    if (newState) {
+      NavEventManager.notifySubmenuOpened(submenuKey);
+    }
+  };
+
+  // Hover handlers for horizontal mode (desktop only)
+  const handleMouseEnter = () => {
+    if (isHorizontal && !webView && !FORCE_CLICK_OPEN) {
+      NavEventManager.notifySubmenuOpened(submenuKey);
+      setLocalOpen(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (isHorizontal && !webView && !FORCE_CLICK_OPEN) {
+      setLocalOpen(false);
+    }
+  };
+
+  // Calculate dropdown position based on sidebar position
+  const getDropdownPosition = () => {
+    if (!itemRef.current) return {};
+    const rect = itemRef.current.getBoundingClientRect();
+    
+    switch (sidebarPosition) {
+      case "top":
+        return { top: rect.bottom + 10, left: rect.left };
+      case "bottom":
+        return { bottom: window.innerHeight - rect.top + 4, left: rect.left };
+      case "right":
+        // For right sidebar, submenu opens to the left of the menu item
+        return { top: rect.top, right: window.innerWidth - rect.left + 4 };
+      case "left":
+      default:
+        // For left sidebar, submenu opens to the right of the menu item
+        return { top: rect.top, left: rect.right + 4 };
+    }
+  };
+
+  // Submenu content - shared between portal and inline rendering
+  const submenuContent = (
+    <List className={'sidebar-list-sub'} disablePadding>
+      {item.children?.map((childItem, index) =>
+        childItem ? (
+          childItem.children ? (
+            <CollapsableSidebarMenu
+              navExpanded={navExpanded}
+              navSize={navSize}
+              item={childItem}
+              key={index}
+              level={level + 1}
+              sidebarPosition={sidebarPosition}
+            />
+          ) : (
+            <SidebarItem
+              level={level}
+              navExpanded={navExpanded}
+              navSize={navSize}
+              showIcon={false}
+              item={childItem}
+              key={index}
+            />
+          )
+        ) : null,
+      )}
+    </List>
+  );
+
+  return (
+    <>
+      <div 
+        ref={itemRef} 
+        style={{ display: isHorizontal ? 'inline-flex' : 'block' }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <ListItemButton
+          selected={localOpen}
+          className={'sidebar-list-menu-item'}
+          sx={isHorizontal ? { 
+            flexShrink: 0, 
+            whiteSpace: 'nowrap',
+            paddingX: 2,
+          } : undefined}
+          onClick={(e) => {
+            // Only handle click if it's not on the expand icon
+            if (!(e.target as HTMLElement).closest('.expand-icon')) {
+              playClick();
+              // For horizontal mode, only handle click on mobile/webview/FORCE_CLICK_OPEN (desktop uses hover)
+              if (!isHorizontal || webView || FORCE_CLICK_OPEN) {
+                handleOpenSubmenu();
+              }
+              
+              if (!isCurrentPath(loc.pathname, item)) {
+                updatePageState();
+                navigate(item.to || item.model);
+              }
+            }
+          }}
+        >
+          <ListItemIcon>{item.icon && item.icon}</ListItemIcon>
+          {/* Este es el submenu con la barra lateral expandida */}
+          {navExpanded && (
+            <ListItemText
+              disableTypography
+              primary={<Typography>{item.label}</Typography>}
+            />
+          )}
+          {navExpanded && (
+            <div onClick={handleExpandClick}>
+              {/* For bottom position, invert icons since submenu opens upward */}
+              {sidebarPosition === "bottom" ? (
+                localOpen ? 
+                  <ExpandMoreOutlinedIcon className='expand-icon more' /> : 
+                  <ExpandLessOutlinedIcon className='expand-icon less' />
+              ) : (
+                localOpen ? 
+                  <ExpandLessOutlinedIcon className='expand-icon less' /> : 
+                  <ExpandMoreOutlinedIcon className='expand-icon more' />
+              )}
+            </div>
+          )}
+        </ListItemButton>
+      </div>
+      
+      {/* Portal submenu for all positions */}
+      {/* Vertical mode (Left/Right) - Inline Expansion using Collapse */}
+      {!isHorizontal && (
+        <Collapse in={localOpen} timeout="auto" unmountOnExit>
+          {submenuContent}
+        </Collapse>
+      )}
+
+      {/* Horizontal mode (Top/Bottom) - Portal Dropdown */}
+      {isHorizontal && (
+        <SubmenuPortal
+          open={navExpanded && localOpen}
+          itemRef={itemRef}
+          sidebarPosition={sidebarPosition}
+          childrenCount={item.children?.length || 0}
+          className="sidebar-submenu-portal"
+          onMouseEnter={() => !webView && !FORCE_CLICK_OPEN && setLocalOpen(true)}
+          onMouseLeave={() => !webView && !FORCE_CLICK_OPEN && setLocalOpen(false)}
+        >
+          {submenuContent}
+        </SubmenuPortal>
+      )}
+    </>
+  );
+};
+
+const MemoizedCollapsableSidebarMenu = memo(CollapsableSidebarMenu, (prev, next) => {
+  return prev === next;
+});
+
+export default MemoizedCollapsableSidebarMenu as typeof CollapsableSidebarMenu;

package/src/default-theme/menu/AppMenuComponents/expanded/SidebarItem.tsx

@@ -0,0 +1,91 @@
+import { ICollapsableSidebarMenu } from '../interfaces';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import Circle from '@mui/icons-material/Circle';
+import { useLocation, useNavigate } from 'react-router';
+
+import { useDispatch } from 'react-redux';
+
+import { useEffect, useState } from 'react';
+
+/** @ts-ignore */
+//import clickSound from '@app/assets/sounds/click2.mp3?string';
+/** @ts-ignore */
+//import bubbleSound from '@app/assets/sounds/bubble.mp3?string';
+import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import {DASHAppConstants} from 'dash-constants';
+import isCurrentPath from '../../../../hooks/isCurrentPath';
+import { NavEventManager } from '../../../../utils/navEvents';
+
+const SidebarItem = ({
+  item,
+  navExpanded,
+  navSize,
+  level,
+  className,
+  showIcon = true,
+}: ICollapsableSidebarMenu) => {
+  const navigate = useNavigate();
+  const DefaultIcon = <Circle />;
+
+  const loc = useLocation();
+
+  const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
+
+  useEffect(() => {
+    setCurrent(isCurrentPath(loc.pathname, item));
+  }, [loc]);
+
+  const playClick = () => {
+
+    if (!!DASHAppConstants.system.UI_SOUNDS) {
+      const audio = new Audio(clickSound);
+      audio.load();
+      audio.play();
+    }
+  };
+
+
+  const dispatch = useDispatch();
+  const updatePageState = () => {
+    const newPageState: IPageState = {
+      title: item?.label,
+      icon: item?.icon,
+      subTitle: item?.group,
+    };
+    dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
+  };
+
+  useEffect(() => {
+    if (isCurrent === true) {
+      updatePageState();
+    }
+  }, [isCurrent]);
+
+  return (
+    <ListItemButton
+      selected={isCurrent}
+      onClick={(e) => {
+      
+        playClick();
+        updatePageState();
+
+        //if ((e.target as any)?.localName === "svg") return;
+
+        if (item?.to) {
+           
+          navigate(item.to.replace(/\/+/g, '/'));
+          
+          // Close drawer on mobile after navigation (for second-level items)
+          if (navSize === 'small') {
+            NavEventManager.closeDrawer();
+          }
+        }
+      }}
+    >
+      <ListItemIcon>{item?.icon || DefaultIcon}</ListItemIcon>
+      {navSize !== "small" && <ListItemText>{item.label}</ListItemText>}
+    </ListItemButton>
+  );
+};
+
+export default SidebarItem;

package/src/default-theme/menu/AppMenuComponents/getItem.tsx

@@ -0,0 +1,17 @@
+import { IMenuItem } from './interfaces';
+
+const getItem = (item: IMenuItem): IMenuItem => {
+	/*return {
+      key: item.key,
+      icon: item.icon,
+      children: item.children,
+      label: item.label,
+      type: item.type,
+      group: item.group,
+      model: item.model,
+      txtLabel: item.txtLabel
+    };*/
+	return item;
+};
+
+export default getItem;