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,37 +15,43 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-
+  console.log(getAuth())
   return (
-    <div className="flex items-center gap-3.5">
+<div className="flex items-center gap-4">
-      <Menu>
+  <div className="hidden md:flex flex-col items-end mr-2 text-right">
-        <MenuItem
+    <span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
-          ref={itemUserRef}
+    <span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
-          toggle="dropdown"
+  </div>
-          trigger="click"
+
-          dropdownProps={{
+  <Menu>
-            placement: isRTL() ? 'bottom-start' : 'bottom-end',
+    <MenuItem
-            modifiers: [
+      ref={itemUserRef}
-              {
+      toggle="dropdown"
-                name: 'offset',
+      trigger="click"
-                options: {
+      dropdownProps={{
-                  offset: [20, 10] // [skid, distance]
+        placement: isRTL() ? 'bottom-start' : 'bottom-end',
-                }
+        modifiers: [
-              }
+          {
-            ]
+            name: 'offset',
-          }}
+            options: {
-        >
+              offset: [20, 10],
-          <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 className="btn btn-icon rounded-full">
-          </MenuToggle>
+        <img
-          {DropdownUser({ menuItemRef: itemUserRef })}
+          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
-        </MenuItem>
+          src={toAbsoluteUrl('/media/avatars/300-32.png')}
-      </Menu>
+          alt="User avatar"
-    </div>
+        />
+      </MenuToggle>
+      {DropdownUser({ menuItemRef: itemUserRef })}
+    </MenuItem>
+  </Menu>
+</div>
+
   );
 };