From e248c463c941cb8f77c84f507a785280f6111fe3 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Wed, 23 Apr 2025 10:59:15 +0700
Subject: [PATCH] changing color role and username in navbar while scroll

---
 src/layouts/demo2/header/HeaderTopbar.tsx | 85 +++++++++++++----------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/layouts/demo2/header/HeaderTopbar.tsx b/src/layouts/demo2/header/HeaderTopbar.tsx
index 485311c..5256605 100644
--- a/src/layouts/demo2/header/HeaderTopbar.tsx
+++ b/src/layouts/demo2/header/HeaderTopbar.tsx
@@ -10,48 +10,63 @@ 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 className="text-xs text-gray-400">{getAuth()?.role_name}</span>
-  </div>
-
-  <Menu>
-    <MenuItem
-      ref={itemUserRef}
-      toggle="dropdown"
-      trigger="click"
-      dropdownProps={{
-        placement: isRTL() ? 'bottom-start' : 'bottom-end',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [20, 10],
-            },
-          },
-        ],
-      }}
-    >
-      <MenuToggle className="btn btn-icon rounded-full">
-        <img
-          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
-          src={toAbsoluteUrl('/media/avatars/profile.png')}
-          alt="User avatar"
-        />
-      </MenuToggle>
-      {DropdownUser({ menuItemRef: itemUserRef })}
-    </MenuItem>
-  </Menu>
-</div>
+    <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 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>
+        <MenuItem
+          ref={itemUserRef}
+          toggle="dropdown"
+          trigger="click"
+          dropdownProps={{
+            placement: isRTL() ? 'bottom-start' : 'bottom-end',
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [20, 10]
+                }
+              }
+            ]
+          }}
+        >
+          <MenuToggle className="btn btn-icon rounded-full">
+            <img
+              className="w-9 h-9 rounded-full border border-gray-500 object-cover"
+              src={toAbsoluteUrl('/media/avatars/profile.png')}
+              alt="User avatar"
+            />
+          </MenuToggle>
+          {DropdownUser({ menuItemRef: itemUserRef })}
+        </MenuItem>
+      </Menu>
+    </div>
   );
 };