Fixed routing issue with POPUP

1 files changed, 13 insertions, 7 deletions

diff --git a/panel/src/components/Navbar.jsx b/panel/src/components/Navbar.jsx
index d9632e3..938e00a 100644
--- a/panel/src/components/Navbar.jsx
+++ b/panel/src/components/Navbar.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import $ from 'jquery';
@@ -9,6 +9,13 @@ import './Navbar.css';
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLinkClick = (path) => {
+    $.magnificPopup.close();
+    setIsMenuOpen(false);
+    navigate(path);
+  };
 
   const toggleMenu = () => {
     if (!isMenuOpen) {
@@ -27,7 +34,6 @@ const Navbar = () => {
     } else {
       $.magnificPopup.close();
     }
-    setIsMenuOpen(!isMenuOpen);
   };
 
   return (
@@ -44,10 +50,10 @@ const Navbar = () => {
         </ul>
         <div id="navbar-popup" className="mfp-hide">
           <ul className="navbar-list-popup">
-            <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li>
-            <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li>
-            <li className="navbar-item"><Link to="/roles">Roles</Link></li>
-            <li className="navbar-item"><Link to="/logout">Logout</Link></li>
+            <li className="navbar-item"><Link to="/dashboard" onClick={() => handleLinkClick('/dashboard')}>Dashboard</Link></li>
+            <li className="navbar-item"><Link to="/manage-ads" onClick={() => handleLinkClick('/manage-ads')}>Manage Ads</Link></li>
+            <li className="navbar-item"><Link to="/roles" onClick={() => handleLinkClick('/roles')}>Roles</Link></li>
+            <li className="navbar-item"><Link to="/logout" onClick={() => handleLinkClick('/logout')}>Logout</Link></li>
           </ul>
         </div>
       </div>