Fix dashboard sidebar navigation and integrate LeaderBoard properly

Co-authored-by: Adez017 <[email protected]>

Author: Copilot

…es/dashboard/LeaderBoard/leaderboard.css …ts/dashboard/LeaderBoard/leaderboard.csssrc/pages/dashboard/LeaderBoard/leaderboard.css renamed to src/components/dashboard/LeaderBoard/leaderboard.css src/pages/dashboard/LeaderBoard/leaderboard.css renamed to src/components/dashboard/LeaderBoard/leaderboard.css

@@ -1,11 +1,52 @@
 import React from "react";
 import { NAVBAR_CONFIG, type NavbarIconName } from "../../constants/navbarConfig";
 
-interface NavbarIconProps {
+// Legacy interface for dashboard usage
+interface DashboardNavbarIconProps {
+  icon: React.ReactNode;
+  text: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+// New interface for navbar usage
+interface ConfigNavbarIconProps {
   name: NavbarIconName;
 }
 
-export default function NavbarIcon({ name }: NavbarIconProps) {
+type NavbarIconProps = DashboardNavbarIconProps | ConfigNavbarIconProps;
+
+// Type guard to check if props are for dashboard usage
+function isDashboardProps(props: NavbarIconProps): props is DashboardNavbarIconProps {
+  return 'icon' in props && 'text' in props && 'active' in props && 'onClick' in props;
+}
+
+export default function NavbarIcon(props: NavbarIconProps) {
+  // Handle dashboard usage
+  if (isDashboardProps(props)) {
+    const { icon, text, active, onClick } = props;
+    return (
+      <div 
+        className={`navbar-icon-item ${active ? 'active' : ''}`}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            onClick();
+          }
+        }}
+      >
+        <span className="navbar-icon">
+          {icon}
+        </span>
+        <span className="navbar-text">{text}</span>
+      </div>
+    );
+  }
+
+  // Handle navbar config usage
+  const { name } = props;
   const IconComponent = NAVBAR_CONFIG[name];
 
   if (!IconComponent) {

…es/dashboard/LeaderBoard/leaderboard.tsx …ts/dashboard/LeaderBoard/leaderboard.tsxsrc/pages/dashboard/LeaderBoard/leaderboard.tsx renamed to src/components/dashboard/LeaderBoard/leaderboard.tsx src/pages/dashboard/LeaderBoard/leaderboard.tsx renamed to src/components/dashboard/LeaderBoard/leaderboard.tsx

@@ -178,6 +178,54 @@
   gap: 8px;
 }
 
+/* Navbar Icon Items for Dashboard */
+.navbar-icon-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--ifm-color-content);
+  font-weight: 500;
+  text-decoration: none;
+  position: relative;
+}
+
+.navbar-icon-item:hover {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-content);
+}
+
+.navbar-icon-item.active {
+  background: var(--ifm-color-primary-lightest);
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+.navbar-icon-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ifm-color-primary);
+  border-radius: 0 2px 2px 0;
+}
+
+.navbar-icon {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+}
+
+.navbar-text {
+  font-size: 14px;
+  line-height: 1.4;
+}
+
 /* Main Content */
 .dashboard-main-content {
   flex: 1;

src/components/navbar/NavbarIcon.tsx

@@ -34,7 +34,7 @@ import {
 import NavbarIcon from "@site/src/components/navbar/NavbarIcon";
 import "@site/src/components/discussions/discussions.css";
 import "./dashboard.css";
-import LeaderBoard from "./LeaderBoard/leaderboard";
+import LeaderBoard from "@site/src/components/dashboard/LeaderBoard/leaderboard";
 
 type DiscussionTab = "discussions" | "trending" | "unanswered";
 type SortOption = "most_popular" | "latest" | "oldest";