changing color role and username in navbar while scroll

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -10,17 +10,33 @@ const HeaderTopbar = () => {
   const itemChatRef = useRef<any>(null);
   const itemUserRef = useRef<any>(null);
   const itemNotificationsRef = useRef<any>(null);
+
   const { isRTL } = useLanguage();
 
+  const [isSticky, setIsSticky] = useState(false);
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsSticky(window.scrollY > 100);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-  // console.log(getAuth())
+  
   return (
     <div className="flex items-center gap-4">
       <div className="hidden md:flex flex-col items-end mr-2 text-right">
-    <span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
+        <span
-    <span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
+          className={`font-semibold text-sm leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
+        >
+          {getAuth()?.user.username}
+        </span>
+        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-gray-400'}`}>
+          {getAuth()?.role_name}
+        </span>
       </div>
 
       <Menu>
@@ -34,10 +50,10 @@ const HeaderTopbar = () => {
               {
                 name: 'offset',
                 options: {
-              offset: [20, 10],
+                  offset: [20, 10]
-            },
+                }
-          },
+              }
-        ],
+            ]
           }}
         >
           <MenuToggle className="btn btn-icon rounded-full">
@@ -51,7 +67,6 @@ const HeaderTopbar = () => {
         </MenuItem>
       </Menu>
     </div>
-
   );
 };