aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--panel/package.json2
-rw-r--r--panel/src/components/Navbar.css43
-rw-r--r--panel/src/components/Navbar.jsx54
-rw-r--r--panel/src/pages/Dashboard.css15
-rw-r--r--panel/yarn.lock10
5 files changed, 111 insertions, 13 deletions
diff --git a/panel/package.json b/panel/package.json
index 4aa0a2e..3e72c2d 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -19,6 +19,8 @@
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"firebase": "^10.12.4",
+ "jquery": "^3.7.1",
+ "magnific-popup": "^1.2.0",
"postcss": "^8.4.40",
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
diff --git a/panel/src/components/Navbar.css b/panel/src/components/Navbar.css
index 76713fb..e28724f 100644
--- a/panel/src/components/Navbar.css
+++ b/panel/src/components/Navbar.css
@@ -3,7 +3,28 @@
padding: 10px 20px;
display: flex;
justify-content: center;
+ align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ position: relative;
+}
+
+.navbar-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 1200px;
+}
+
+.menu-icon {
+ color: white;
+ font-size: 2rem;
+ cursor: pointer;
+ width: 35px; /* Adjust the width */
+ height: 35px; /* Make it equal to width for a square */
+ display: none; /* Hidden by default */
+ justify-content: center;
+ align-items: center;
}
.navbar-list {
@@ -28,14 +49,30 @@
color: #FFEB3B;
}
+.mfp-hide {
+ display: none;
+}
+
@media (max-width: 768px) {
- .navbar {
- flex-direction: column;
- align-items: center;
+ .menu-icon {
+ display: flex; /* Show menu icon on mobile screens */
}
.navbar-list {
+ display: none; /* Hide regular menu list on mobile screens */
+ }
+
+ .navbar-list-popup {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: #2196F3;
+ width: 100%;
+ height: 100vh;
}
.navbar-item {
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>
);
};
diff --git a/panel/src/pages/Dashboard.css b/panel/src/pages/Dashboard.css
index 024df9b..49a11ed 100644
--- a/panel/src/pages/Dashboard.css
+++ b/panel/src/pages/Dashboard.css
@@ -19,7 +19,7 @@
.dashboard-header {
text-align: center;
- margin-bottom: 30px;
+ margin-bottom: 10px;
}
.dashboard-header h4 {
@@ -43,6 +43,7 @@
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
+
.stat-card h6 {
font-size: 16px;
color: #666;
@@ -55,10 +56,18 @@
}
.chart-container {
- margin-top: 30px;
+ margin-top: 20px;
}
.chart-container canvas {
width: 100% !important;
- height: 400px !important;
+ height: 100% !important;
+}
+
+@media (max-width: 768px) {
+ .stat-card {
+ margin: 0px 4px;
+ padding: 10px;
+ text-align: center;
+ }
}
diff --git a/panel/yarn.lock b/panel/yarn.lock
index 2d4ad03..04c08c3 100644
--- a/panel/yarn.lock
+++ b/panel/yarn.lock
@@ -2635,6 +2635,11 @@ jiti@^1.21.0:
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+jquery@^3.7.1:
+ version "3.7.1"
+ resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
+ integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
+
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -2758,6 +2763,11 @@ lru-cache@^5.1.1:
dependencies:
yallist "^3.0.2"
+magnific-popup@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/magnific-popup/-/magnific-popup-1.2.0.tgz#333fcb56c0cd2ab3935340acca4ac9d8c6412e0d"
+ integrity sha512-vkRTVPhQwUgmndX1086k4kMorkzf1XIjBhyL4eIiV8SAjUJQuAdgQEFtMEwbHRFhHOfXe+vcEkRKYLjRAFzMwg==
+
merge2@^1.3.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2024-12-25 19:07:57 +0000