changed headerTopBar

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -1,9 +1,10 @@
-import { useRef } from 'react';
+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);
@@ -14,38 +15,44 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-
+  console.log(getAuth())
   return (
-    <div className="flex items-center gap-3.5">
-      <Menu>
-        <MenuItem
-          ref={itemUserRef}
-          toggle="dropdown"
-          trigger="click"
-          dropdownProps={{
-            placement: isRTL() ? 'bottom-start' : 'bottom-end',
-            modifiers: [
-              {
-                name: 'offset',
-                options: {
-                  offset: [20, 10] // [skid, distance]
-                }
-              }
-            ]
-          }}
-        >
-          <MenuToggle className="btn btn-icon rounded-full">
-            <img
-              className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
-              src={toAbsoluteUrl('/media/avatars/blank.png')}
-              alt=""
-            />
-          </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 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/300-32.png')}
+          alt="User avatar"
+        />
+      </MenuToggle>
+      {DropdownUser({ menuItemRef: itemUserRef })}
+    </MenuItem>
+  </Menu>
+</div>
+
   );
 };
 
-export { HeaderTopbar };
+export { HeaderTopbar };