ui-soxo-bootstrap-core 2.6.1-dev.16 → 2.6.1-dev.18

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;
@@ -39,7 +48,8 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
   // Import t and i18n from useTranslation
   const { t, i18n } = useTranslation();
   const { state } = useContext(GlobalContext);
-  const [isMobile, setIsMobile] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const [iconImageFailed, setIconImageFailed] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -52,39 +62,110 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+    useEffect(() => {
+      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);
+        }
+      });
+    }
+
+    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 <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>
   );
 
+    // 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
@@ -267,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}` }}
         >
@@ -312,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 */}
@@ -329,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("/");
@@ -412,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}
                           />
                         </>
@@ -433,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>
@@ -459,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>
@@ -482,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>
@@ -508,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>
   );
 }

package/core/lib/components/sidemenu/sidemenu.scss

@@ -1,4 +1,52 @@
 .sidemenu {
+  .side-loader-shell {
+    margin: 14px 12px 10px;
+    padding: 10px;
+    border-radius: 14px;
+    border: 1px solid rgba(222, 229, 239, 0.9);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.95) 100%);
+    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.05);
+    display: grid;
+    gap: 8px;
+  }
+
+  .side-loader-chip,
+  .side-loader-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 30px;
+  }
+
+  .side-loader-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #eef1f5 0%, #f7f8fb 50%, #eef1f5 100%);
+    background-size: 220% 100%;
+    animation: side-shimmer 1.4s linear infinite;
+    flex: 0 0 auto;
+  }
+
+  .side-loader-line {
+    height: 10px;
+    border-radius: 999px;
+    width: 100%;
+    background: linear-gradient(90deg, #edf0f4 0%, #f8f9fb 50%, #edf0f4 100%);
+    background-size: 220% 100%;
+    animation: side-shimmer 1.4s linear infinite;
+  }
+
+  .side-loader-list {
+    margin: 8px;
+    padding: 8px 6px 18px;
+    border-radius: 14px;
+    border: 1px solid rgba(229, 234, 242, 0.85);
+    background: rgba(255, 255, 255, 0.88);
+    display: grid;
+    gap: 4px;
+  }
+
   .intro {
     .logo-wrapper {
       border-bottom: none;
@@ -40,18 +88,26 @@
     padding: 5px 16px;
     position: fixed;
     z-index: 1000;
-    width: 17%;
-    background: #fff;
+    // width: 17%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
     // border-bottom: 1.5px solid #24aeb8;
     &.close {
       width: 6% !important;
     }
 
     .logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
       // height: 15px;
       // border-bottom: 1px solid #eaeaea;
 
       .sidemenu-brand-logo {
+        transition:
+          transform 220ms ease,
+          filter 220ms ease;
         // width: 50%;
         // margin: 10px;
         // width: 200px;
@@ -75,6 +131,11 @@
         }
 
         cursor: pointer;
+
+        &:hover {
+          transform: translateY(-1px) scale(1.01);
+          filter: saturate(1.05);
+        }
       }
     }
 
@@ -94,20 +155,22 @@
   }
 
   .menu-item {
-    padding-top: 10px;
+    padding-top: 8px;
     // height: calc(100vh - 48px); /* Adjust height */
     height: 100vh;
     margin-top: 0px;
     width: 256px;
     top: 48px;
-    border-bottom: 1px solid #f0f0f0;
+    border-right: 1px solid rgba(226, 231, 239, 0.9);
+    border-bottom: 1px solid rgba(240, 243, 248, 0.8);
     position: fixed;
     height: 100vh;
     margin-top: 0;
     overflow-y: scroll;
     overflow-x: hidden;
     width: 211px;
-    padding-bottom: 50px;
+    padding-bottom: 24px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(249, 250, 252, 0.98) 100%);
 
     /* Custom Scrollbar like macOS */
     scrollbar-width: thin; /* For Firefox */
@@ -142,18 +205,57 @@
       margin: 80px;
     }
 
+    .menu-motion-shell {
+      padding: 6px 6px 14px;
+    }
+
     .ant-menu-inline {
       border: none !important;
     }
 
     .menu-collapsed {
-      width: 81px;
+      width: 100%;
+      min-width: 0;
       display: flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
     }
 
+    .menu-icon-wrap {
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+      border-radius: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+      transition:
+        background-color 220ms ease,
+        transform 220ms ease;
+    }
+
+    .menu-image-icon {
+      width: 18px;
+      height: 18px;
+      object-fit: contain;
+      display: block;
+    }
+
+    .menu-label-wrap {
+      min-width: 0;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .caption,
+    .menu-label-wrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .menu-collapsed .anticon {
       margin-right: 8px;
     }
@@ -178,6 +280,102 @@
     /* Style selected item */
     .ant-menu {
       background-color: transparent !important;
+      padding: 4px 0 28px;
+    }
+
+    .ant-menu-item,
+    .ant-menu-submenu-title {
+      width: calc(100% - 12px) !important;
+      margin: 3px 6px !important;
+      padding-right: 10px !important;
+      border-radius: 12px;
+      height: 40px !important;
+      line-height: 40px !important;
+      transition:
+        background-color 180ms ease,
+        box-shadow 180ms ease,
+        transform 180ms ease;
+      border: 1px solid transparent;
+    }
+
+    .ant-menu-item::after,
+    .ant-menu-submenu-title::after {
+      display: none !important;
+    }
+
+    .ant-menu-submenu-arrow {
+      transition:
+        transform 200ms ease,
+        opacity 200ms ease;
+    }
+
+    .ant-menu-item:hover,
+    .ant-menu-submenu-title:hover {
+      background: linear-gradient(180deg, rgba(247, 248, 251, 0.98) 0%, rgba(242, 244, 248, 0.98) 100%) !important;
+      border-color: rgba(224, 229, 238, 0.95);
+      transform: translateX(1px);
+    }
+
+    .ant-menu-item:hover .menu-icon-wrap,
+    .ant-menu-submenu-title:hover .menu-icon-wrap {
+      background: rgba(100, 116, 139, 0.1);
+      transform: scale(1.03);
+    }
+
+    .ant-menu-item-selected,
+    .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      background: linear-gradient(180deg, rgba(244, 247, 251, 0.98) 0%, rgba(238, 242, 247, 0.98) 100%) !important;
+      border-color: rgba(214, 222, 233, 0.95) !important;
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.7),
+        0 2px 8px rgba(71, 85, 105, 0.08);
+    }
+
+    .ant-menu-item-selected::before,
+    .ant-menu-submenu-selected > .ant-menu-submenu-title::before {
+      content: '';
+      position: absolute;
+      left: 6px;
+      top: 8px;
+      bottom: 8px;
+      width: 3px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, #64748b 0%, #475569 100%);
+      opacity: 0.95;
+    }
+
+    .ant-menu-sub.ant-menu-inline {
+      background: transparent !important;
+      padding-top: 2px;
+    }
+
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item {
+      height: 36px !important;
+      line-height: 36px !important;
+      border-radius: 10px;
+      margin-left: 18px !important;
+      width: calc(100% - 24px) !important;
+    }
+
+    .ant-menu-inline-collapsed > .ant-menu-item,
+    .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+      padding-inline: calc(50% - 12px) !important;
+      width: calc(100% - 12px) !important;
+      margin: 4px 6px !important;
+    }
+
+    .ant-menu-inline-collapsed .menu-collapsed {
+      justify-content: center;
+      gap: 0;
+    }
+
+    .ant-menu-inline-collapsed .menu-label-wrap {
+      display: none !important;
+    }
+
+    .ant-menu-inline-collapsed .menu-icon-wrap,
+    .ant-menu-inline-collapsed .menu-collapsed .anticon {
+      margin-right: 0 !important;
     }
     // .ant-menu-inline .ant-menu-item::after{
     //   border-right: none;
@@ -232,6 +430,15 @@
     }
   }
 }
+
+@keyframes side-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -20% 0;
+  }
+}
 @media only screen and (max-width: 768px) {
   .sidemenu {
     // width: 100% !important;
@@ -245,7 +452,7 @@
     .intro {
       width: 210px;
       height: 60px;
-      padding: 0px;
+      padding: 6px 8px;
       // width: 100% !important;
       // padding: 10px 16px;
     }
@@ -253,6 +460,7 @@
     .menu-item {
       width: 100% !important;
       top: 62px;
+      border-right: none;
     }
 
     .sidebar-footer {
@@ -261,17 +469,16 @@
   }
 }
 
-.ant-menu-item:hover {
-  background-color: #e6f7ff !important;
-  color: #1677ff !important;
-}
-
 /* Tooltip styling if needed */
 .ant-tooltip-inner {
   max-width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: rgba(255, 255, 255, 0.98) !important;
+  color: #111827 !important;
+  border: 1px solid rgba(224, 229, 238, 0.95);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  border-radius: 10px;
+  font-weight: 500;
 }