Fixed responsiveness of Navbar and Dashboard

1 files changed, 47 insertions, 7 deletions

diff --git a/panel/src/components/Navbar.jsx b/panel/src/components/Navbar.jsx
index b287e97..d9632e3 100644
--- a/panel/src/components/Navbar.jsx
+++ b/panel/src/components/Navbar.jsx
@@ -1,16 +1,56 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import $ from 'jquery';
+import 'magnific-popup';
+import 'magnific-popup/dist/magnific-popup.css';
 import './Navbar.css';
 
 const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    if (!isMenuOpen) {
+      $.magnificPopup.open({
+        items: {
+          src: '#navbar-popup',
+          type: 'inline'
+        },
+        midClick: true,
+        closeOnBgClick: true,
+        callbacks: {
+          open: () => setIsMenuOpen(true),
+          close: () => setIsMenuOpen(false),
+        },
+      });
+    } else {
+      $.magnificPopup.close();
+    }
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
     <nav className="navbar">
-      <ul className="navbar-list">
-        <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>
-      </ul>
+      <div className="navbar-container">
+        <div className="menu-icon" onClick={toggleMenu}>
+          {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
+        </div>
+        <ul className="navbar-list">
+          <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>
+        </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>
+          </ul>
+        </div>
+      </div>
     </nav>
   );
 };