fixed recent action section bug

src/component/layout/layoutcom/UserHeader.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../../utils/getImage";
 import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -9,6 +9,8 @@ export default function UserHeader(){
 
     const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
+    const nav_menu = useRef(null)
+
     const toggleSidebar = (e) => {
         e.preventDefault()
         document.body.classList.toggle('sidebar-toggled')
@@ -32,6 +34,11 @@ export default function UserHeader(){
         window.location.reload()
     }
 
+    const toggleMenu = (e) => {
+        // e.preventDefault()
+        nav_menu.current.classList.toggle('show')
+    }
+
     return (
         <header className="app-header top-bar">
             <nav className="navbar navbar-expand-md">
@@ -66,11 +73,11 @@ export default function UserHeader(){
 
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
-                                <a href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">
+                                <a onClick={toggleMenu} href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
                                     <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
                                     <span className="bg-success user-status"></span>
                                 </a>
-                                <div className="dropdown-menu animated fadeIn">
+                                <div ref={nav_menu} className="dropdown-menu animated fadeIn">
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">