Skip to content

Commit ef83117

Browse files
tulsishukatulsishuka
committed
Removed unnecessary CSS for dashboard menu button to clean up UI
1 parent 32df44a commit ef83117

2 files changed

Lines changed: 73 additions & 37 deletions

File tree

‎src/pages/dashboard/dashboard.css‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
position:relative;
77
}
88

9-
/* Dashboard Menu Button - Mobile Only */
10-
.dashboard-menu-btn {
9+
10+
11+
/* Dashboard Menu Button - Mobile Only */
12+
/* .dashboard-menu-btn {
1113
display: none;
1214
position: fixed;
1315
top: 70px;
@@ -24,19 +26,26 @@
2426
font-weight: bold;
2527
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
2628
transition: all 0.3s ease;
27-
}
29+
} */
30+
2831

29-
.dashboard-menu-btn:hover {
32+
/* .dashboard-menu-btn:hover {
3033
background: var(--ifm-color-primary-dark);
3134
transform: scale(1.05);
3235
}
3336
34-
.dashboard-menu-btn.open {
37+
38+
39+
40+
.dashboard-menu-btn.open {
3541
background: #dc3545;
36-
}
42+
} */
3743

38-
/* Mobile Menu */
39-
.dashboard-mobile-menu {
44+
45+
46+
47+
/* Mobile Menu */
48+
.dashboard-mobile-menu {
4049
display: none;
4150
position: fixed;
4251
top: 0;
@@ -47,21 +56,34 @@
4756
pointer-events: none;
4857
}
4958

59+
60+
5061
.dashboard-mobile-menu.show {
5162
display: block;
5263
pointer-events: all;
5364
}
5465

66+
67+
68+
69+
70+
/* Overlay */
5571
.dashboard-menu-overlay {
56-
position: absolute;
72+
position: fixed;
5773
top: 0;
5874
left: 0;
59-
right: 0;
60-
bottom: 0;
61-
background: rgba(0, 0, 0, 0.5);
62-
z-index: 1051;
75+
width: 100vw;
76+
height: 100vh;
77+
background: rgba(0,0,0,0.5);
78+
z-index: 1050;
6379
}
6480

81+
82+
83+
84+
85+
86+
6587
.dashboard-mobile-menu > div:last-child {
6688
position: absolute;
6789
top: 0;
@@ -103,7 +125,7 @@
103125
padding: 0;
104126
width: 30px;
105127
height: 30px;
106-
display: flex;
128+
display: flex ;
107129
align-items: center;
108130
justify-content: center;
109131
}

‎src/pages/dashboard/giveaway/index.tsx‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import NavbarIcon from "../../../components/navbar/NavbarIcon";
77
import { useHistory } from "@docusaurus/router";
88
import { Home, MessageCircle, Gift, Trophy, Crown, Star, Award, Clock, Users, TrendingUp, Medal, ArrowLeft } from "lucide-react";
99
import "../dashboard.css";
10+
import { add } from "date-fns";
1011

1112
// Giveaway-specific styles
1213
const giveawayStyles = `
@@ -421,7 +422,8 @@ const giveawayStyles = `
421422
}
422423
`;
423424

424-
// Inject styles
425+
426+
425427
if (typeof document !== 'undefined') {
426428
const existingStyle = document.getElementById('giveaway-styles');
427429
if (!existingStyle) {
@@ -449,7 +451,7 @@ const GiveawayPage: React.FC = () => {
449451
const [loading, setLoading] = useState(true);
450452
const [activeTab, setActiveTab] = useState<"home" | "discuss" | "contributors" | "giveaway">("giveaway");
451453

452-
// Close dashboard menu when clicking outside
454+
453455
useEffect(() => {
454456
const handleClickOutside = (event: MouseEvent) => {
455457
const target = event.target as Element;
@@ -466,18 +468,25 @@ const GiveawayPage: React.FC = () => {
466468
document.addEventListener('mousedown', handleClickOutside);
467469
}
468470

471+
469472
return () => {
473+
474+
475+
476+
477+
470478
document.removeEventListener('mousedown', handleClickOutside);
471479
};
472480
}, [showDashboardMenu]);
473481

474-
// Ensure active tab is set correctly when page loads
475482
useEffect(() => {
476-
// We're on the giveaway page, so the active tab should be "giveaway"
477483
setActiveTab("giveaway");
478484
}, []);
479485

480486
useEffect(() => {
487+
488+
489+
481490
// Simulate fetching leaderboard data
482491
const fetchLeaderboard = async () => {
483492
setLoading(true);
@@ -578,36 +587,37 @@ const GiveawayPage: React.FC = () => {
578587
<Head>
579588
<title>🎁 recode hive Giveaway</title>
580589
</Head>
581-
<div className="dashboard-layout">
582-
{/* Dashboard Menu Button - Only visible on mobile */}
583-
<button
590+
<div className="dashboard-layout">
591+
<button
584592
className={`dashboard-menu-btn ${showDashboardMenu ? "open" : ""}`}
585593
onClick={() => setShowDashboardMenu(!showDashboardMenu)}
586594
aria-label="Toggle dashboard menu"
587595
>
588596
{showDashboardMenu ? <span aria-hidden="true">✕</span> : <span aria-hidden="true">☰</span>}
589597
</button>
590-
591-
{/* Dashboard Mobile Menu */}
598+
592599
<div className={`dashboard-mobile-menu ${showDashboardMenu ? "show" : ""}`}>
593-
{/* Overlay - always present but opacity controlled by CSS */}
594600
<div
595601
className="dashboard-menu-overlay"
596-
onClick={() => setShowDashboardMenu(false)}
597-
/>
602+
onClick={() => setShowDashboardMenu(false)}/>
598603
<div>
599604
<div className="dashboard-menu-header">
600-
<h3>Dashboard Menu</h3>
601-
<button
602-
className="close-menu-btn"
603-
onClick={() => setShowDashboardMenu(false)}
604-
aria-label="Close menu"
605-
>
606-
✕
607-
</button>
608-
</div>
605+
{/* <h3>Dashboard Menu</h3> */}
606+
607+
</div>
608+
609+
<div className="dashboard-menu-header">
610+
<h3>Dashboard Menu</h3>
611+
<button
612+
className="close-menu-btn"
613+
onClick={() => setShowDashboardMenu(false)}
614+
aria-label="Close menu"
615+
>
616+
✕
617+
</button>
618+
</div>
619+
609620

610-
{/* Dashboard navigation items */}
611621
<div className="dashboard-menu-items">
612622
<div
613623
className={`menu-item ${activeTab === "home" ? "active" : ""}`}
@@ -647,7 +657,11 @@ const GiveawayPage: React.FC = () => {
647657
</div>
648658
</div>
649659
</div>
650-
</div>
660+
</div>
661+
662+
663+
664+
651665

652666
<div className="dashboard-sidebar">
653667
<div className="sidebar-header">

0 commit comments

Comments
 (0)