@visns-studio/visns-components 5.11.3 → 5.11.5

package/src/components/crm/Navigation.jsx

@@ -183,6 +183,7 @@ function Navigation({
     setSystemAuth,
     themeType,
     userProfile,
+    debugIcons = false, // Add debug flag
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -197,6 +198,7 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
+    const actionItemsRef = useRef(null);
 
     const appNavClasses = styles['app-nav'];
 
@@ -294,7 +296,7 @@ function Navigation({
                         to={n.url}
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
-                        className={`tooltip ${activeClass}`}
+                        className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
                         title={n.label}
                     >
@@ -532,13 +534,65 @@ function Navigation({
     useEffect(() => {
         function handleScroll() {
             setIsScrolled(window.scrollY > 0);
+
+            // Debug logging for icon visibility
+            if (debugIcons && actionItemsRef.current) {
+                const anchors = actionItemsRef.current.querySelectorAll('a');
+                const buttons =
+                    actionItemsRef.current.querySelectorAll('button');
+
+                console.log('=== SCROLL DEBUG ===');
+                console.log('Scroll Y:', window.scrollY);
+                console.log('Anchors found:', anchors.length);
+                console.log('Buttons found:', buttons.length);
+
+                anchors.forEach((anchor, index) => {
+                    const rect = anchor.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(anchor);
+                    console.log(`Anchor ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+
+                buttons.forEach((button, index) => {
+                    const rect = button.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(button);
+                    console.log(`Button ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+            }
         }
 
         window.addEventListener('scroll', handleScroll);
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, []);
+    }, [debugIcons]);
 
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
@@ -601,7 +655,12 @@ function Navigation({
                             <span></span>
                         </button>
                     </div>
-                    <div className={styles['hactions-alternate']}>
+                    <div
+                        className={`${styles['hactions-alternate']} ${
+                            debugIcons ? styles['debug-icons'] : ''
+                        }`}
+                        ref={actionItemsRef}
+                    >
                         <ul>
                             {navData.settings.map((setting, settingKey) =>
                                 setting.permission === true ? (
@@ -653,11 +712,12 @@ function Navigation({
                 </ul>
             </div>
             <div
-                className={
+                className={`${
                     themeType === 'alternate'
                         ? styles['hactions-alternate']
                         : styles.hactions
-                }
+                } ${debugIcons ? styles['debug-icons'] : ''}`}
+                ref={actionItemsRef}
             >
                 <ul>
                     {navData.settings.map((setting, settingKey) =>