94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Menu, X, Trophy, Sparkles, BookMarked } from "lucide-react";
|
|
|
|
|
|
interface DashboardSidebarProps {
|
|
guildId: string;
|
|
}
|
|
|
|
const menuItems = [
|
|
{ id: "leaderboard", label: "Leaderboard", icon: Trophy, href: "/leaderboard" },
|
|
{ id: "leveling", label: "Leveling", icon: Sparkles, href: "/leveling" },
|
|
];
|
|
|
|
export default function DashboardSidebar({ guildId }: DashboardSidebarProps) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const getActiveTab = () => {
|
|
if (pathname.includes("/leveling")) return "leveling";
|
|
return "leaderboard";
|
|
};
|
|
|
|
const activeTab = getActiveTab();
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="fixed bottom-4 right-4 z-50 lg:hidden p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all"
|
|
>
|
|
{sidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
|
|
{/* Mobile Sidebar Overlay */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`fixed inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out flex flex-col ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
|
|
}`}
|
|
>
|
|
|
|
<div className="p-4 space-y-2 pt-20 lg:pt-24 flex-1 overflow-y-auto">
|
|
|
|
|
|
|
|
{menuItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = activeTab === item.id;
|
|
const href = `/dashboard/${guildId}${item.href}`;
|
|
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={href}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 ${isActive
|
|
? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
|
|
: "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Docs Link at Bottom */}
|
|
<div className="p-4 mt-auto border-t border-white/10">
|
|
<Link
|
|
href="/docs"
|
|
className="w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
|
|
>
|
|
<BookMarked className="w-5 h-5" />
|
|
Documentation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
}
|