diff options
author | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-03 17:24:35 +0530 |
---|---|---|
committer | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-03 17:24:35 +0530 |
commit | 2843285c5d4c995841d4ba5b0aee8fb0458f5d49 (patch) | |
tree | 18175a01ed391203dc684954ebb7431a6933af92 | |
parent | b536e7cf8e5a5eddd31bda00d1cab0ea2a907c61 (diff) | |
download | admin-panel-2843285c5d4c995841d4ba5b0aee8fb0458f5d49.tar.gz admin-panel-2843285c5d4c995841d4ba5b0aee8fb0458f5d49.tar.bz2 admin-panel-2843285c5d4c995841d4ba5b0aee8fb0458f5d49.zip |
Fixed responsiveness of Navbar and Dashboard
-rw-r--r-- | panel/package.json | 2 | ||||
-rw-r--r-- | panel/src/components/Navbar.css | 43 | ||||
-rw-r--r-- | panel/src/components/Navbar.jsx | 54 | ||||
-rw-r--r-- | panel/src/pages/Dashboard.css | 15 | ||||
-rw-r--r-- | panel/yarn.lock | 10 |
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" |