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,9 +15,14 @@ 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">
+  <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}
@@ -28,23 +34,24 @@ const HeaderTopbar = () => {
           {
             name: 'offset',
             options: {
-                  offset: [20, 10] // [skid, distance]
+              offset: [20, 10],
-                }
+            },
-              }
+          },
-            ]
+        ],
       }}
     >
       <MenuToggle className="btn btn-icon rounded-full">
         <img
-              className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
+          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
-              src={toAbsoluteUrl('/media/avatars/blank.png')}
+          src={toAbsoluteUrl('/media/avatars/300-32.png')}
-              alt=""
+          alt="User avatar"
         />
       </MenuToggle>
       {DropdownUser({ menuItemRef: itemUserRef })}
     </MenuItem>
   </Menu>
-    </div>
+</div>
+
   );
 };