58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useRef, useEffect, useState } from 'react';
|
|
import { KeenIcon } from '@/components/keenicons';
|
|
import { toAbsoluteUrl } from '@/utils';
|
|
import { Menu, MenuItem, MenuToggle } from '@/components';
|
|
import { DropdownUser } from '@/partials/dropdowns/user';
|
|
import { useLanguage } from '@/i18n';
|
|
import { getAuth } from '@/auth';
|
|
|
|
const HeaderTopbar = () => {
|
|
const itemChatRef = useRef<any>(null);
|
|
const itemUserRef = useRef<any>(null);
|
|
const itemNotificationsRef = useRef<any>(null);
|
|
const { isRTL } = useLanguage();
|
|
|
|
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>
|
|
|
|
);
|
|
};
|
|
|
|
export { HeaderTopbar }; |