TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changing color role and username in navbar while scroll

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-23 10:59:15 +07:00
parent fc40440f3f
commit e248c463c9
1 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/layouts/demo2/header/HeaderTopbar.tsx
View File

@ -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>
);
};