@dashadmin/dash-admin 1.3.24 → 1.3.26

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

@@ -0,0 +1,41 @@
+import { IDashAutoAdminResourceConfig } from "dash-auto-admin";
+import { JSX } from "react";
+import { SidebarPosition } from "../AppSidebarMaterial";
+
+export interface IAppMenu {
+	//hasDashboard: boolean;
+	children?: React.ReactNode;
+	autoHideScroll?: boolean;
+	menu?: IDashAutoAdminResourceConfig[];
+	debug?: boolean;
+	showDrawer?: boolean;
+	navSize: "small" | "large";
+    navExpanded: boolean;
+	sidebarPosition?: SidebarPosition;
+	[key: string]: any;
+}
+
+export interface IMenuItem {
+	group: string;
+	model: string;
+	label: string;
+	txtLabel: string;
+	key: React.Key;
+	to?: string;
+	icon?: JSX.Element;
+	children?: IMenuItem[];
+	type?: 'group';
+	selected?: boolean;
+	/** When true, this menu item is a simple navigation link (not a react-admin resource) */
+	menuOnly?: boolean;
+}
+
+export interface ICollapsableSidebarMenu {
+	item: IMenuItem;
+	showIcon?: boolean;
+	className?: string;
+	navExpanded: boolean;
+	navSize: "small" | "large";
+	level: number;
+	sidebarPosition?: SidebarPosition;
+}

package/src/default-theme/menu/AppMenuComponents/submenuConstants.ts

@@ -0,0 +1,85 @@
+import { CSSProperties, RefObject } from 'react';
+import { SidebarPosition } from '../AppSidebarMaterial';
+
+// Toggle this to force click behavior instead of hover (for debugging/testing)
+export const FORCE_CLICK_OPEN = false; // Set to true for click behavior
+
+// Threshold for when submenu should render at fixed top/bottom instead of relative to item
+export const SUBMENU_SCROLL_THRESHOLD = 10;
+
+/**
+ * Base styles for submenu portal container
+ */
+export const getSubmenuBaseStyle = (
+    sidebarPosition: SidebarPosition,
+    renderAtTop: boolean = false
+): CSSProperties => ({
+    zIndex: 10000,
+    position: 'fixed',
+    maxHeight: sidebarPosition === "top" || sidebarPosition === "bottom" ? '60vh' : (renderAtTop ? '100vh' : '80vh'),
+    overflowY: 'auto',
+    width: sidebarPosition === "top" || sidebarPosition === "bottom" ? 'auto' : '260px',
+    minWidth: '200px',
+    background: 'var(--module-bg, #252526)',
+    boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
+    borderRadius: 8,
+});
+
+/**
+ * Calculate submenu position based on sidebar position and item rect
+ */
+export const calculateSubmenuPosition = (
+    rect: DOMRect,
+    sidebarPosition: SidebarPosition,
+    renderAtTop: boolean = false
+): CSSProperties => {
+    switch (sidebarPosition) {
+        case "right":
+            // Submenu opens to the LEFT of the sidebar item
+            return { 
+                top: rect.top, 
+                right: window.innerWidth - rect.left - 4,
+                left: 'auto'
+            };
+        case "top":
+            return { 
+                top: renderAtTop ? 120 : rect.bottom - 4, 
+                left: rect.left,
+                right: 'auto'
+            };
+        case "bottom":
+            return { 
+                bottom: renderAtTop ? 120 : (window.innerHeight - rect.top) - 4, 
+                left: rect.left,
+                right: 'auto'
+            };
+        case "left":
+        default:
+            // Submenu opens to the RIGHT of the sidebar item
+            return { 
+                top: rect.top, 
+                left: rect.right - 4,
+                right: 'auto'
+            };
+    }
+};
+
+/**
+ * Get complete submenu style by combining base style and position
+ */
+export const getSubmenuStyle = (
+    itemRef: RefObject<HTMLElement | null>,
+    sidebarPosition: SidebarPosition,
+    renderAtTop: boolean = false
+): CSSProperties => {
+    const rect = itemRef.current?.getBoundingClientRect();
+    const baseStyle = getSubmenuBaseStyle(sidebarPosition, renderAtTop);
+
+    if (!rect) {
+        // Fallback if rect not available
+        return { ...baseStyle, top: 0, left: 0 };
+    }
+
+    const positionStyle = calculateSubmenuPosition(rect, sidebarPosition, renderAtTop);
+    return { ...baseStyle, ...positionStyle };
+};

package/src/default-theme/menu/AppSidebarMaterial.tsx

@@ -0,0 +1,339 @@
+import * as React from 'react';
+import { styled, Theme, CSSObject } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import MuiDrawer from '@mui/material/Drawer';
+import { useMediaQuery, useTheme } from '@mui/material';
+import { IDASHAppState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import { useDispatch, useSelector } from 'react-redux';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { useState } from 'react';
+
+import { useWindowSize, dashStorage } from 'dash-utils';
+import AppMaterialMenu from './AppMaterialMenu';
+import { useLocation } from 'react-router';
+import { isEqual } from 'lodash';
+import { NavEventManager } from '../../utils/navEvents';
+
+// Only keep layout settings selector - remove nav state selectors
+const selectLayoutSettings = (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => ({
+    navStyle: state.settings.navStyle,
+    layoutType: state.settings.layoutType,
+    themeType: state.settings.themeType,
+    layoutSettings: state.settings.layoutSettings,
+});
+
+const selectPanelSettings = (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => 
+    state.common.panelSettings;
+
+// Sidebar position type
+export type SidebarPosition = "left" | "top" | "bottom" | "right";
+
+// Component props interface
+export interface AppSidebarMaterialProps {
+    className?: string;
+    sidebarPosition?: SidebarPosition;
+   
+}
+
+const AppSidebarMaterial: React.FC<AppSidebarMaterialProps> = (props) => {
+    const { sidebarPosition: propSidebarPosition} = props;
+    const location = useLocation();
+    const dispatch = useDispatch();
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumOrSmaller = useMediaQuery(theme.breakpoints.down('md')); // For sidebar position switching
+
+    // Only subscribe to layout settings - nav state is handled by AppSidebarMaterial
+    const layoutState = useSelector(selectLayoutSettings, isEqual);
+    const panelSettings = useSelector(selectPanelSettings);
+
+    // Get primary and secondary sidebar positions from Redux panelSettings
+    const primarySidebarPosition: SidebarPosition = propSidebarPosition || panelSettings?.sidebarPosition || 'left';
+    const secondarySidebarPosition: SidebarPosition = panelSettings?.secondarySidebarPosition || 'left';
+
+    // Use secondary position on medium or smaller screens (for burger menu behavior)
+    const sidebarPosition: SidebarPosition = isMediumOrSmaller ? secondarySidebarPosition : primarySidebarPosition;
+
+    // Check if position is horizontal (top/bottom) - these don't expand/collapse
+    const isHorizontalPosition = sidebarPosition === "top" || sidebarPosition === "bottom";
+
+    const {
+        navStyle,
+        layoutType,
+        themeType,
+        layoutSettings
+    } = layoutState;
+
+    // Local state for nav - initialize from localStorage for persistence
+    const [localNavExpanded, setLocalNavExpanded] = useState(() => {
+        const stored = dashStorage.getItem('dashNavExpanded');
+        return stored !== null ? stored === 'true' : false;
+    });
+    const [localNavSize, setLocalNavSize] = useState<"small" | "large">(() => {
+        const stored = dashStorage.getItem('dashNavSize');
+        return (stored === 'small' || stored === 'large') ? stored : 'large';
+    });
+
+    // Create refs to track current values for Redux sync
+    const localNavExpandedRef = React.useRef(localNavExpanded);
+    const localNavSizeRef = React.useRef(localNavSize);
+
+    // Update refs when values change
+    React.useEffect(() => {
+        localNavExpandedRef.current = localNavExpanded;
+        localNavSizeRef.current = localNavSize;
+    }, [localNavExpanded, localNavSize]);
+
+    // Persist nav state to localStorage when it changes
+    React.useEffect(() => {
+        dashStorage.setItem('dashNavExpanded', String(localNavExpanded));
+    }, [localNavExpanded]);
+
+    React.useEffect(() => {
+        dashStorage.setItem('dashNavSize', localNavSize);
+    }, [localNavSize]);
+
+    // Listen for nav events from other components
+    React.useEffect(() => {
+        const unsubscribeToggle = NavEventManager.onToggleExpanded(() => {
+            setLocalNavExpanded(prev => !prev);
+        });
+
+        const unsubscribeSet = NavEventManager.onSetExpanded((expanded) => {
+            setLocalNavExpanded(expanded);
+        });
+
+        // Listen for close drawer events (triggered when navigating on mobile)
+        const unsubscribeClose = NavEventManager.onCloseDrawer(() => {
+            if (localNavSize === 'small') {
+                setLocalNavExpanded(false);
+            }
+        });
+
+        return () => {
+            unsubscribeToggle();
+            unsubscribeSet();
+            unsubscribeClose();
+        };
+    }, [localNavSize]);
+
+    // Memoize logo extraction to prevent unnecessary re-renders
+    const logos = React.useMemo(() => ({
+        horizontalLogo: panelSettings?.horizontalLogo || <>🖥</>,
+        squaredLogo: panelSettings?.squaredLogo || <>🖥</>,
+    }), [panelSettings?.horizontalLogo, panelSettings?.squaredLogo]);
+
+    // Body class management - keep it simple
+    React.useEffect(() => {
+        if (!layoutSettings || !layoutType || !themeType) return;
+        
+        const body = document.body;
+        
+        // Remove old classes
+        body.classList.remove(
+            layoutSettings.LAYOUT_TYPE_FULL,
+            layoutSettings.LAYOUT_TYPE_BOXED,
+            layoutSettings.LAYOUT_TYPE_FRAMED,
+            layoutSettings.THEME_TYPE_DARK,
+            layoutSettings.THEME_TYPE_LIGHT
+        );
+        
+        // Add new classes
+        body.classList.add(layoutType, themeType);
+    }, [layoutType, themeType, layoutSettings]);
+
+    // Nav style management
+    React.useEffect(() => {
+        if (!layoutSettings || !navStyle) return;
+        
+        const body = document.body;
+        const horizontalStyles = [
+            layoutSettings.NAV_STYLE_DEFAULT_HORIZONTAL,
+            layoutSettings.NAV_STYLE_DARK_HORIZONTAL,
+            layoutSettings.NAV_STYLE_INSIDE_HEADER_HORIZONTAL,
+            layoutSettings.NAV_STYLE_ABOVE_HEADER,
+            layoutSettings.NAV_STYLE_BELOW_HEADER
+        ];
+        
+        const isHorizontal = horizontalStyles.includes(navStyle);
+        body.classList.toggle('full-scroll', isHorizontal);
+        body.classList.toggle('horizontal-layout', isHorizontal);
+    }, [navStyle, layoutSettings]);
+
+    // Location-based classes - ONLY dispatch to Redux on location changes
+    const previousLocationClassRef = React.useRef<string>('');
+    
+    React.useEffect(() => {
+        const body = document.body;
+        let formattedPath = '';
+        
+        if (location.pathname && location.pathname !== '/') {
+            formattedPath = location.pathname.replace(/^\/|\/$/g, '').replace(/\//g, '-');
+        }
+        
+        const currentLocationClass = formattedPath ? `location-${formattedPath}` : '';
+        
+        // Remove previous class
+        if (previousLocationClassRef.current) {
+            body.classList.remove(previousLocationClassRef.current);
+        }
+        
+        // Add new class
+        if (currentLocationClass) {
+            body.classList.add(currentLocationClass);
+            previousLocationClassRef.current = currentLocationClass;
+        } else {
+            previousLocationClassRef.current = '';
+        }
+
+        // 🎯 ONLY sync local nav state to Redux on location changes (not on every nav toggle)
+        return () => {
+            if (previousLocationClassRef.current) {
+                body.classList.remove(previousLocationClassRef.current);
+            }
+            
+            // Use ref values to avoid stale closures and prevent infinite loops
+            dispatch(DASH_REDUX_ACTIONS.setNavExpanded(localNavExpandedRef.current));
+            dispatch(DASH_REDUX_ACTIONS.setNavSize(localNavSizeRef.current));
+        };
+    }, [location.pathname, dispatch]); // ✅ Removed localNavExpanded and localNavSize from deps
+
+    const windowSize = useWindowSize();
+
+    // Update parent layout className whenever local nav state or position changes
+    React.useEffect(() => {
+        const layoutElement = document.getElementById('dash-app-layout');
+        if (layoutElement) {
+            // Remove existing nav-related classes
+            layoutElement.classList.remove('expanded', 'collapsed', 'small', 'large');
+            layoutElement.classList.remove('sidebar-position-left', 'sidebar-position-right', 'sidebar-position-top', 'sidebar-position-bottom');
+            
+            // Add current state classes
+            layoutElement.classList.add(localNavExpanded ? 'expanded' : 'collapsed');
+            layoutElement.classList.add(localNavSize);
+            layoutElement.classList.add(`sidebar-position-${sidebarPosition}`);
+        }
+    }, [localNavExpanded, localNavSize, sidebarPosition]);
+
+    const toggleDrawer = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setLocalNavExpanded(!localNavExpanded);
+        // 🎯 NO Redux dispatch here - only local state update
+        // Redux will be synced only on location changes
+    };
+
+    // isSmallScreen and theme are already declared at the top of the component
+    const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
+    // Track previous breakpoint states to detect changes
+    const [prevIsSmall, setPrevIsSmall] = useState<boolean | null>(null);
+    const [prevIsLarge, setPrevIsLarge] = useState<boolean | null>(null);
+    const [prevIsMediumOrSmaller, setPrevIsMediumOrSmaller] = useState<boolean | null>(null);
+
+    React.useEffect(() => {
+        // Initial load - set initial values
+        if (prevIsSmall === null || prevIsLarge === null || prevIsMediumOrSmaller === null) {
+            // On small/medium screens, ALWAYS force small+collapsed regardless of stored prefs.
+            // This ensures the sidebar never appears as a permanent drawer on mobile.
+            if (isMediumOrSmaller) {
+                setLocalNavSize("small");
+                setLocalNavExpanded(false);
+            } else {
+                // Large screen: respect stored preferences or apply defaults
+                const hasStoredNavSize = dashStorage.getItem('dashNavSize') !== null;
+                const hasStoredNavExpanded = dashStorage.getItem('dashNavExpanded') !== null;
+
+                if (!hasStoredNavSize) {
+                    setLocalNavSize("large");
+                }
+                if (!hasStoredNavExpanded) {
+                    setLocalNavExpanded(isLargeScreen);
+                }
+            }
+            
+            setPrevIsSmall(isSmallScreen);
+            setPrevIsLarge(isLargeScreen);
+            setPrevIsMediumOrSmaller(isMediumOrSmaller);
+            return;
+        }
+        
+        // Check if we crossed the medium breakpoint (sidebar position switch)
+        if (prevIsMediumOrSmaller !== isMediumOrSmaller) {
+            setLocalNavSize(isMediumOrSmaller ? "small" : "large");
+            
+            if (isMediumOrSmaller) {
+                // Crossed into medium or smaller screen - collapse nav
+                setLocalNavExpanded(false);
+            } else {
+                // Crossed into larger screen - expand nav
+                setLocalNavExpanded(true);
+            }
+            
+            setPrevIsMediumOrSmaller(isMediumOrSmaller);
+        }
+        
+        // Check if we crossed the small breakpoint
+        if (prevIsSmall !== isSmallScreen) {
+            if (isSmallScreen) {
+                // Crossed into small screen - collapse nav
+                setLocalNavExpanded(false);
+            }
+            
+            setPrevIsSmall(isSmallScreen);
+        }
+        
+        // Check if we crossed the large breakpoint
+        if (prevIsLarge !== isLargeScreen) {
+            if (isLargeScreen && !isMediumOrSmaller) {
+                // Only expand when crossing into large AND not in secondary mode
+                setLocalNavExpanded(true);
+            }
+            
+            setPrevIsLarge(isLargeScreen);
+        }
+        // 🎯 NO Redux dispatch here - only local state updates
+        // Redux will be synced only on location changes
+    }, [isSmallScreen, isLargeScreen, isMediumOrSmaller, prevIsSmall, prevIsLarge, prevIsMediumOrSmaller]);
+
+    // For horizontal positions (top/bottom), always use expanded/large. For vertical (left/right), use local state.
+    const effectiveNavExpanded = isHorizontalPosition ? true : localNavExpanded;
+    const effectiveNavSize = isHorizontalPosition ? "large" : localNavSize;
+
+    const drawerOpen = effectiveNavSize === "large" || (effectiveNavSize === "small" && effectiveNavExpanded);
+    const drawerClassName = `sidebar-drawer`;
+    
+    return (
+        <Box sx={{ display: 'flex' }}>
+          
+            <MuiDrawer
+                variant={localNavSize === "small" ? 'temporary' : 'permanent'}
+                anchor={sidebarPosition}
+                open={drawerOpen}
+                className={drawerClassName}
+                data-sidebar-position={sidebarPosition}
+                onClose={() => {
+                    if (localNavSize === "small") {
+                        setLocalNavExpanded(false);
+                        // 🎯 NO Redux dispatch here - only local state update
+                    }
+                }}
+                ModalProps={{
+                    keepMounted: true, // Better open performance on mobile
+                }}
+            >
+                <AppMaterialMenu 
+                    navSize={effectiveNavSize} 
+                    navExpanded={effectiveNavExpanded}
+                    logos={logos}
+                    onToggleDrawer={isHorizontalPosition ? undefined : toggleDrawer}
+                    sidebarPosition={sidebarPosition}
+                />
+            </MuiDrawer>
+        </Box>
+    );
+};
+
+//AppSidebarMaterial.whyDidYouRender = true;
+
+export default AppSidebarMaterial;

package/src/default-theme/menu/SidebarActions.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Box } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { IDASHAppState } from 'dash-admin-state';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import AvatarComponent from '../../components/user/AvatarComponent';
+import BridgedLocalesMenuButton from '../../components/i18n/BridgedLocalesMenuButton';
+import DarkToggleMode from '../../components/menu/DarkToggleMode';
+import { useAuthContext } from '../../contexts/auth/AuthContext';
+import { SidebarPosition } from './AppSidebarMaterial';
+import LangSwitcher from '../../components/i18n/LangSwitcher';
+
+export interface SidebarActionsProps {
+    sidebarPosition?: SidebarPosition;
+    navExpanded?: boolean;
+}
+
+/**
+ * Reusable component for sidebar actions: Avatar, Locale Selector, Dark Mode Toggle, and HeaderToolBar
+ * Renders horizontally for top/bottom sidebar positions, vertically for left/right
+ * 
+ * When headerToolBarReplace is true in Redux state, ONLY renders the HeaderToolBar component,
+ * replacing the default actions (Avatar, Locale, DarkMode toggle).
+ */
+const SidebarActions: React.FC<SidebarActionsProps> = ({ 
+    sidebarPosition = "left", 
+    navExpanded = true 
+}) => {
+    const authContext = useAuthContext();
+    const isHorizontal = sidebarPosition === "top" || sidebarPosition === "bottom";
+
+    // Get HeaderToolBar and headerToolBarReplace from Redux
+    const HeaderToolBar = useSelector(
+        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) =>
+            state.common.headerToolBar,
+    );
+    const headerToolBarReplace = useSelector(
+        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) =>
+            state.common.headerToolBarReplace,
+    );
+
+    return (
+        <Box
+            className="sidebar-actions"
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                //flexDirection: isHorizontal ? 'row' : (navExpanded ? 'column-reverse' : 'column'),
+                
+                ...(isHorizontal ? {
+                    marginLeft: 'auto',
+                    flexShrink: 0,
+                    paddingRight: 2,
+                    flexDirection: navExpanded ? 'row-reverse' : 'row'
+                }:
+                {
+                   
+                    flexShrink: 0,
+                    flexDirection: navExpanded ? 'column' : 'column'
+                }
+                ),
+            }}
+        >
+              {authContext?.authenticated && authContext.user?.id !== 'guest' && (
+                        <AvatarComponent sidebarPosition={sidebarPosition} />
+                    )}    
+
+            {HeaderToolBar && headerToolBarReplace ? (
+                // Replace mode: Only render the custom HeaderToolBar
+                <HeaderToolBar />
+            ) : (
+                // Default mode: Render all actions
+                <>            
+                    {HeaderToolBar && <HeaderToolBar />}
+                    {authContext?.authenticated ? <BridgedLocalesMenuButton /> :  <LangSwitcher />}
+                    <DarkToggleMode />
+                </>
+            )}
+        </Box>
+    );
+};
+
+export default SidebarActions;