Skip to content

Removed unnecessary CSS for dashboard menu button to clean up UI #880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+73 −37
Open

Removed unnecessary CSS for dashboard menu button to clean up UI #880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 36 additions & 14 deletions src/pages/dashboard/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
position:relative;
}

/* Dashboard Menu Button - Mobile Only */
.dashboard-menu-btn {


/* Dashboard Menu Button - Mobile Only */
/* .dashboard-menu-btn {
display: none;
position: fixed;
top: 70px;
Expand All @@ -24,19 +26,26 @@
font-weight: bold;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
} */


.dashboard-menu-btn:hover {
/* .dashboard-menu-btn:hover {
background: var(--ifm-color-primary-dark);
transform: scale(1.05);
}

.dashboard-menu-btn.open {



.dashboard-menu-btn.open {
background: #dc3545;
}
} */

/* Mobile Menu */
.dashboard-mobile-menu {



/* Mobile Menu */
.dashboard-mobile-menu {
display: none;
position: fixed;
top: 0;
Expand All @@ -47,21 +56,34 @@
pointer-events: none;
}



.dashboard-mobile-menu.show {
display: block;
pointer-events: all;
}





/* Overlay */
.dashboard-menu-overlay {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1051;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1050;
}







.dashboard-mobile-menu > div:last-child {
position: absolute;
top: 0;
Expand Down Expand Up @@ -103,7 +125,7 @@
padding: 0;
width: 30px;
height: 30px;
display: flex;
display: flex ;
align-items: center;
justify-content: center;
}
Expand Down
60 changes: 37 additions & 23 deletions src/pages/dashboard/giveaway/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import NavbarIcon from "../../../components/navbar/NavbarIcon";
import { useHistory } from "@docusaurus/router";
import { Home, MessageCircle, Gift, Trophy, Crown, Star, Award, Clock, Users, TrendingUp, Medal, ArrowLeft } from "lucide-react";
import "../dashboard.css";
import { add } from "date-fns";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why import this


// Giveaway-specific styles
const giveawayStyles = `
Expand Down Expand Up @@ -421,7 +422,8 @@ const giveawayStyles = `
}
`;

// Inject styles


if (typeof document !== 'undefined') {
const existingStyle = document.getElementById('giveaway-styles');
if (!existingStyle) {
Expand Down Expand Up @@ -449,7 +451,7 @@ const GiveawayPage: React.FC = () => {
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState<"home" | "discuss" | "contributors" | "giveaway">("giveaway");

// Close dashboard menu when clicking outside

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Element;
Expand All @@ -466,18 +468,25 @@ const GiveawayPage: React.FC = () => {
document.addEventListener('mousedown', handleClickOutside);
}


return () => {





document.removeEventListener('mousedown', handleClickOutside);
};
}, [showDashboardMenu]);

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

useEffect(() => {



// Simulate fetching leaderboard data
const fetchLeaderboard = async () => {
setLoading(true);
Expand Down Expand Up @@ -578,36 +587,37 @@ const GiveawayPage: React.FC = () => {
<Head>
<title>🎁 recode hive Giveaway</title>
</Head>
<div className="dashboard-layout">
{/* Dashboard Menu Button - Only visible on mobile */}
<button
<div className="dashboard-layout">
<button
className={`dashboard-menu-btn ${showDashboardMenu ? "open" : ""}`}
onClick={() => setShowDashboardMenu(!showDashboardMenu)}
aria-label="Toggle dashboard menu"
>
{showDashboardMenu ? <span aria-hidden="true">✕</span> : <span aria-hidden="true">☰</span>}
</button>

{/* Dashboard Mobile Menu */}

<div className={`dashboard-mobile-menu ${showDashboardMenu ? "show" : ""}`}>
{/* Overlay - always present but opacity controlled by CSS */}
<div
className="dashboard-menu-overlay"
onClick={() => setShowDashboardMenu(false)}
/>
onClick={() => setShowDashboardMenu(false)}/>
<div>
<div className="dashboard-menu-header">
<h3>Dashboard Menu</h3>
<button
className="close-menu-btn"
onClick={() => setShowDashboardMenu(false)}
aria-label="Close menu"
>
✕
</button>
</div>
{/* <h3>Dashboard Menu</h3> */}

</div>

<div className="dashboard-menu-header">
<h3>Dashboard Menu</h3>
<button
className="close-menu-btn"
onClick={() => setShowDashboardMenu(false)}
aria-label="Close menu"
>
✕
</button>
</div>


{/* Dashboard navigation items */}
<div className="dashboard-menu-items">
<div
className={`menu-item ${activeTab === "home" ? "active" : ""}`}
Expand Down Expand Up @@ -647,7 +657,11 @@ const GiveawayPage: React.FC = () => {
</div>
</div>
</div>
</div>
</div>





<div className="dashboard-sidebar">
<div className="sidebar-header">
Expand Down