@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

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

@@ -1,41 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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',
-    // The wrapper is the SINGLE owner of the panel visuals (surface, border,
-    // shadow, radius, padding). The inner ul.dropdown must stay transparent —
-    // if both layers draw a border/background, their edges show as a seam line.
-    background: 'var(--primary-contrast, #252526)',
-    border: '1px solid rgba(255,255,255,0.08)',
-    boxShadow: '0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.4)',
-    borderRadius: 12,
-    padding: 6,
-});
-
-/**
- * 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

@@ -1,339 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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;