user header name added

src/component/layout/layoutcom/UserHeader.jsx

@@ -1,10 +1,14 @@
 import React from "react";
 import getImage from "../../../utils/getImage";
 import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import siteLinks from "../../../links/siteLinks";
 
 
 export default function UserHeader(){
 
+    const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
     const toggleSidebar = (e) => {
         e.preventDefault()
         document.body.classList.toggle('sidebar-toggled')
@@ -23,7 +27,7 @@ export default function UserHeader(){
 
     const logout = () => {
         localStorage.clear()
-        navigate('/login', {replace: true})
+        navigate(siteLinks.login, {replace: true})
     }
 
     return (
@@ -42,20 +46,21 @@ export default function UserHeader(){
                     <i className="ti ti-align-left"></i>
                 </button>
                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
-                    <div className="navigation d-flex">
-                        {/* <ul className="navbar-nav nav-left">
-                           <li className="nav-item">
+                    <div className="navigation d-flex align-items-center">
+                        <ul className="navbar-nav nav-left">
+                            <h4 className="text-info pt-1">{userDetails?.account_name}</h4>
+                           {/* <li className="nav-item">
                                <a href="#" className="nav-link sidebar-toggle">
                                    <i className="ti ti-align-right"></i>
                                </a>
-                           </li>
+                           </li> */}
 
-                           <li className="nav-item full-screen d-none d-lg-block" id="btnFullscreen">
+                           {/* <li className="nav-item full-screen d-none d-lg-block" id="btnFullscreen">
                                <a href="#" className="nav-link expand">
                                    <i className="icon-size-fullscreen"></i>
                                </a>
-                           </li>
-                        </ul> */}
+                           </li> */}
+                        </ul>
 
                         <ul className="navbar-nav nav-right ml-auto">
                             {/* <li className="nav-item dropdown">
@@ -285,8 +290,8 @@ export default function UserHeader(){
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">
-                                                <h4 className="text-white mb-0">Alice Williams</h4>
-                                                <small className="text-white">Henry@example.com</small>
+                                                <h5 className="text-white mb-0">{userDetails?.firstname} {userDetails?.lastname}</h5>
+                                                <small className="text-white">{userDetails.email}</small>
                                             </div>
                                             <a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
                                                data-placement="top" title="" data-original-title="Logout"> <i