ui-soxo-bootstrap-core 2.6.1-dev.2 → 2.6.1-dev.20

package/core/lib/components/sidemenu/sidemenu.js

@@ -10,11 +10,11 @@
 
 import React, { useState, useEffect, useContext } from 'react';
 
-import { animationControls, motion, useAnimation } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 
 import { GlobalContext } from './../../Store';
 
-import { Menu, message, Skeleton, Space, Popover } from 'antd';
+import { Menu, message, Popover } from 'antd';
 
 import FirebaseUtils from './../../utils/firebase.utils';
 
@@ -24,6 +24,15 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { Menus } from '../../models';
 
+import {
+  sidebarGroupVariants,
+  sidebarIntroVariants,
+  sidebarItemRevealVariants,
+  sidebarLoaderContainerVariants,
+  sidebarLoaderRowVariants,
+  sidebarMenuSurfaceVariants,
+} from './animations';
+
 import './sidemenu.scss';
 
 const { SubMenu } = Menu;
@@ -40,53 +49,131 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
   const { t, i18n } = useTranslation();
   const { state } = useContext(GlobalContext);
     const [isMobile, setIsMobile] = useState(false);
+    const [iconImageFailed, setIconImageFailed] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
+    };
+
+    handleResize(); // Set initial value
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
     useEffect(() => {
-      const handleResize = () => {
-        setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
-      };
+      setIconImageFailed(false);
+    }, [menu?.image_path]);
+
+  const normalizeIconClass = (iconValue) => {
+    const raw = (iconValue || 'fa-user').trim();
+    const tokens = (raw || 'fa-user').split(/\s+/).filter(Boolean);
+    const tokenSet = new Set(tokens);
+
+    const modernToLegacyStyleMap = {
+      'fa-solid': 'fas',
+      'fa-regular': 'far',
+      'fa-light': 'fal',
+      'fa-brands': 'fab',
+    };
+    const fa6ToFa5IconMap = {
+      'fa-house': 'fa-home',
+      'fa-house-user': 'fa-home',
+      'fa-gauge': 'fa-tachometer-alt',
+      'fa-location-dot': 'fa-map-marker-alt',
+    };
+    const styleTokens = ['fa', 'fas', 'far', 'fal', 'fab', 'fa-solid', 'fa-regular', 'fa-light', 'fa-brands'];
+
+    const iconTokens = tokens.filter((token) => token.startsWith('fa-') && !styleTokens.includes(token));
+    const hasAnyStyleToken = tokens.some((token) => styleTokens.includes(token));
+
+    tokenSet.add('fa');
+
+    tokens.forEach((token) => {
+      if (modernToLegacyStyleMap[token]) {
+        tokenSet.add(modernToLegacyStyleMap[token]);
+      }
+    });
+
+    if (!hasAnyStyleToken) {
+      tokenSet.add('fas');
+    }
+
+    if (!iconTokens.length) {
+      const normalizedName = raw && !raw.includes(' ') ? (raw.startsWith('fa-') ? raw : `fa-${raw}`) : 'fa-user';
+      tokenSet.add(fa6ToFa5IconMap[normalizedName] || normalizedName);
+    } else {
+      iconTokens.forEach((token) => {
+        const mapped = fa6ToFa5IconMap[token];
+        if (mapped) {
+          tokenSet.add(mapped);
+        }
+      });
+    }
 
-      handleResize(); // Set initial value
-      window.addEventListener('resize', handleResize);
+    return Array.from(tokenSet).join(' ');
+  };
+
+  const renderMenuGlyph = () => {
+    if (menu && menu.image_path && !iconImageFailed) {
+      return (
+        <img
+          className="menu-image-icon"
+          src={menu.image_path}
+          alt={menu?.caption || caption || 'menu-icon'}
+          onError={() => setIconImageFailed(true)}
+          loading="lazy"
+        />
+      );
+    }
 
-      return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    return <i className={normalizeIconClass(icon)} aria-hidden="true" />;
+  };
 
   const menuText = t(caption);
   const menuContent = (
-    <>
+    <motion.div variants={sidebarItemRevealVariants} className="menu-collapsed">
       {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
       {!collapsed ? (
-        <div className="menu-collapsed">
-          <div>
-            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+        <>
+          <div className="menu-icon-wrap">
+            {renderMenuGlyph()}
           </div>
 
-          <div style={{ color: state.theme.colors.leftSectionColor }}>
-            <span className="caption">
+          <div className="menu-label-wrap" style={{ color: state.theme.colors.leftSectionColor }} title={menuText}>
+            <span className="caption" title={menuText}>
               {/* {caption} */}
               {/* <Trans i18nKey="Appointments"></Trans> */}
               {t(`${caption}`)}
             </span>
           </div>
-        </div>
+        </>
       ) : (
-        <div className="menu-collapsed">
-          <span className="anticon">
-            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+        <>
+          <span className="anticon menu-icon-wrap">
+            {renderMenuGlyph()}
           </span>
 
-          <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
+          <span className="menu-label-wrap" style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }} title={menuText}>
             {/* <>{caption}</> */}
             {t(`${caption}`)}
           </span>
-        </div>
+        </>
       )}
-    </>
+    </motion.div>
   );
 
-    // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
-    return isMobile || collapsed ? menuContent : <Popover content={menuText} placement="right">{menuContent}</Popover>;
+    // Show tooltip labels on desktop collapsed mode, hide on mobile / expanded mode.
+    // return isMobile || !collapsed ? menuContent : <Popover content={menuText} placement="right">{menuContent}</Popover>;
+  // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
+  return isMobile || collapsed ? (
+    menuContent
+  ) : (
+    <Popover content={menuText} placement="right">
+      {menuContent}
+    </Popover>
+  );
 }
 
 export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {
@@ -123,7 +210,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
    * Logout Function
    */
   async function handleLogout() {
-    let dbPtrValue = appSettings.headers.db_ptr;
+    // let dbPtrValue = appSettings.headers.db_ptr;
     const isEnvThemeTrue = process.env.REACT_APP_THEME === 'true';
 
     //  Only clear localStorage if theme is not 'true'
@@ -137,7 +224,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
       // const result = Users.logout()
       localStorage.clear();
 
-      localStorage.setItem('db_ptr', dbPtrValue);
+      // localStorage.setItem('db_ptr', dbPtrValue);
 
       let userInfo = {
         dms: {},
@@ -261,17 +348,31 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
   }, [state.theme]);
 
   const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
+  const prefersReducedMotion = useReducedMotion();
+  const shouldAnimate = !prefersReducedMotion;
+  const loaderRows = collapsed ? 5 : 7;
 
   return (
     <div className="sidemenu">
       {loading ? (
-        <Space className="side-loader">
-          <Skeleton.Avatar />
-          <Skeleton.Button />
-          {/* <Skeleton.Input  /> */}
-        </Space>
+        <motion.div
+          className="side-loader-shell"
+          variants={sidebarLoaderContainerVariants}
+          initial={shouldAnimate ? 'hidden' : false}
+          animate={shouldAnimate ? 'visible' : false}
+        >
+          {[...Array(4)].map((_, index) => (
+            <motion.div key={`intro-loader-${index}`} className="side-loader-chip" variants={sidebarLoaderRowVariants}>
+              <span className="side-loader-dot" />
+              <span className="side-loader-line" />
+            </motion.div>
+          ))}
+        </motion.div>
       ) : (
-        <div
+        <motion.div
+          variants={sidebarIntroVariants}
+          initial={shouldAnimate ? 'hidden' : false}
+          animate={shouldAnimate ? 'visible' : false}
           className="intro"
           style={{ backgroundColor: state.theme.colors.leftSectionBackground, borderBottom: `2px solid ${state.theme.colors.borderColor}` }}
         >
@@ -306,7 +407,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
           {/* If value of collapsed is true render header else not rendering */}
 
           {!collapsed ? renderCustomHeader() : ''}
-        </div>
+        </motion.div>
       )}
 
       {/* Intro Component */}
@@ -323,25 +424,49 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
       {/* Search for Queries Ends */}
 
-      <div className={`menu-item ${!collapsed ? 'open' : 'close'}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground }}>
+      <motion.div
+        className={`menu-item ${!collapsed ? 'open' : 'close'}`}
+        style={{ backgroundColor: state.theme.colors.leftSectionBackground }}
+        variants={sidebarMenuSurfaceVariants}
+        initial={shouldAnimate ? 'hidden' : false}
+        animate={shouldAnimate ? 'visible' : false}
+      >
         {loading ? (
-          <></>
+          <motion.div
+            className="side-loader-list"
+            variants={sidebarLoaderContainerVariants}
+            initial={shouldAnimate ? 'hidden' : false}
+            animate={shouldAnimate ? 'visible' : false}
+          >
+            {[...Array(loaderRows)].map((_, rowIndex) => (
+              <motion.div key={`menu-loader-${rowIndex}`} className="side-loader-row" variants={sidebarLoaderRowVariants}>
+                <span className="side-loader-dot" />
+                <span className="side-loader-line" />
+              </motion.div>
+            ))}
+          </motion.div>
         ) : (
-          <Menu
-            // selectedKeys={[selected]}
-            // style={{ width: 256 }}
-            // defaultSelectedKeys={selected}
-            // defaultOpenKeys={['']}
-            inlineCollapsed={collapsed}
-            mode="inline"
-            theme={process.env.REACT_APP_THEME}
-            selectedKeys={selectedKeys}
-            openKeys={openKeys}
-            onOpenChange={onOpenChange}
-            style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
-            // theme={''}
+          <motion.div
+            className="menu-motion-shell"
+            variants={sidebarGroupVariants}
+            initial={shouldAnimate ? 'hidden' : false}
+            animate={shouldAnimate ? 'visible' : false}
           >
-            {/* <Menu.Item
+            <Menu
+              // selectedKeys={[selected]}
+              // style={{ width: 256 }}
+              // defaultSelectedKeys={selected}
+              // defaultOpenKeys={['']}
+              inlineCollapsed={collapsed}
+              mode="inline"
+              theme={process.env.REACT_APP_THEME}
+              selectedKeys={selectedKeys}
+              openKeys={openKeys}
+              onOpenChange={onOpenChange}
+              style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
+              // theme={''}
+            >
+              {/* <Menu.Item
               onClick={() => {
                 setSelected([1]);
                 history.push("/");
@@ -406,7 +531,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                           <CollapsedIconMenu
                             menu={menu}
                             caption={menu.caption}
-                            icon={menu.icon_name || 'fa-solid fas fa-user'}
+                            icon={menu.icon_name || 'fa-user'}
                             collapsed={collapsed}
                           />
                         </>
@@ -427,9 +552,9 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                               title={
                                 <span>
                                   <CollapsedIconMenu
-                                    menu={menu}
+                                    menu={submenu}
                                     caption={submenu.caption}
-                                    icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                    icon={submenu.icon_name || 'fa-user'}
                                     collapsed={collapsed}
                                   />
                                 </span>
@@ -453,7 +578,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                                     <CollapsedIconMenu
                                       menu={menu}
                                       caption={menu.caption}
-                                      icon={menu.icon_name || 'fa-solid fas fa-user'}
+                                      icon={menu.icon_name || 'fa-user'}
                                       collapsed={collapsed}
                                     />
                                   </Menu.Item>
@@ -476,9 +601,9 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                               key={submenu.path || submenu.caption}
                             >
                               <CollapsedIconMenu
-                                menu={menu}
+                                menu={submenu}
                                 caption={submenu.caption}
-                                icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                icon={submenu.icon_name || 'fa-user'}
                                 collapsed={collapsed}
                               />
                             </Menu.Item>
@@ -502,26 +627,27 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                       // key={`${menu.id}-${randomIndex}`}
                       key={menu.path || menu.caption}
                     >
-                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
+                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-user'} collapsed={collapsed} />
                     </Menu.Item>
                   );
                 }
               })}
 
-            {loading ? (
-              <div class="skeleton-wrapper"></div>
-            ) : (
-              <Menu.Item onClick={handleLogout} key="logout-button">
-                <CollapsedIconMenu caption="Logout" icon="fa-solid fas fa-user" collapsed={collapsed} />
-              </Menu.Item>
-            )}
-          </Menu>
+              {loading ? (
+                <div className="skeleton-wrapper"></div>
+              ) : (
+                <Menu.Item onClick={handleLogout} key="logout-button">
+                  <CollapsedIconMenu caption="Logout" icon="fa-user" collapsed={collapsed} />
+                </Menu.Item>
+              )}
+            </Menu>
+          </motion.div>
         )}
 
         {/* Footer Logo */}
         {/* {renderFooter(footerLogo)} */}
         {/* Footer Logo Ends */}
-      </div>
+      </motion.div>
     </div>
   );
 }