From fae99f6a407de70fdba6029e45c194fb241c3433 Mon Sep 17 00:00:00 2001
From: Biswakalyan Bhuyan <biswa@surgot.in>
Date: Sat, 3 Aug 2024 18:59:56 +0530
Subject: Fixed routing issue with POPUP

---
 panel/src/components/Navbar.jsx       | 20 +++++++++++++-------
 panel/src/components/PrivateRoute.jsx |  4 ++++
 2 files changed, 17 insertions(+), 7 deletions(-)

(limited to 'panel/src/components')

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>
diff --git a/panel/src/components/PrivateRoute.jsx b/panel/src/components/PrivateRoute.jsx
index e2c502d..341625e 100644
--- a/panel/src/components/PrivateRoute.jsx
+++ b/panel/src/components/PrivateRoute.jsx
@@ -5,6 +5,10 @@ import { useAuth } from '../contexts/AuthContext';
 const PrivateRoute = () => {
   const { currentUser } = useAuth();
 
+  if (currentUser === undefined) {
+    return <div>Loading...</div>; // Or a spinner/loading component
+  }
+
   return currentUser ? <Outlet /> : <Navigate to="/login" />;
 };
 
-- 
cgit v1.2.3-59-g8ed1b