Fixed routing issue with POPUP

4 files changed, 45 insertions, 20 deletions

diff --git a/panel/src/App.jsx b/panel/src/App.jsx
index 6d88aaf..6a09905 100644
--- a/panel/src/App.jsx
+++ b/panel/src/App.jsx
@@ -7,24 +7,33 @@ import Dashboard from './pages/Dashboard';
 import ManageAds from './pages/ManageAds';
 import Roles from './pages/Roles';
 import PrivateRoute from './components/PrivateRoute';
-import { AuthProvider } from './contexts/AuthContext';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './tailwind.css';
 
+const AppRoutes = () => {
+  const { currentUser } = useAuth();
+
+  return (
+    <Routes>
+      <Route path="/" element={currentUser ? <Navigate to="/dashboard" /> : <Navigate to="/login" />} />
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route path="/reset" element={<ResetPage />} />
+      <Route path="/" element={<PrivateRoute />}>
+        <Route path="dashboard" element={<Dashboard />} />
+        <Route path="manage-ads" element={<ManageAds />} />
+        <Route path="roles" element={<Roles />} />
+	<Route path="logout" element={<Navigate to="/login" />} />
+      </Route>
+    </Routes>
+  );
+};
+
 function App() {
   return (
     <AuthProvider>
-      <Routes>
-        <Route path="/" element={<Navigate to="/login" />} />
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
-        <Route path="/reset" element={<ResetPage />} />
-        <Route path="/" element={<PrivateRoute />}>
-          <Route path="dashboard" element={<Dashboard />} />
-          <Route path="manage-ads" element={<ManageAds />} />
-          <Route path="roles" element={<Roles />} />
-        </Route>
-      </Routes>
+      <AppRoutes />
     </AuthProvider>
   );
 }
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" />;
 };
 
diff --git a/panel/src/contexts/AuthContext.jsx b/panel/src/contexts/AuthContext.jsx
index cf8c7b5..f4f9383 100644
--- a/panel/src/contexts/AuthContext.jsx
+++ b/panel/src/contexts/AuthContext.jsx
@@ -10,10 +10,12 @@ export const useAuth = () => {
 
 export const AuthProvider = ({ children }) => {
   const [currentUser, setCurrentUser] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       setCurrentUser(user);
+      setLoading(false);
     });
 
     return unsubscribe;
@@ -23,5 +25,9 @@ export const AuthProvider = ({ children }) => {
     currentUser,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
 };