blob: 296ac4972299ee0cfb3686f0689326f9ff945f09 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { Link } from "react-router";
import { useState } from "react";
export const NavBar = ({ currentPage, user, handleLogout }: {
currentPage: string;
user: { username: string };
handleLogout: () => void;
}) => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const menuOptions = (
<>
<Link
to="/home"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
currentPage === 'dashboard' || currentPage === 'home'
? 'bg-violet-600 text-white shadow-lg shadow-violet-500/25'
: 'text-slate-300 hover:text-white hover:bg-slate-800/50'
}`}
onClick={() => setIsMobileMenuOpen(false)}
>
Home
</Link>
<Link
to="/import"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
currentPage === 'import'
? 'bg-violet-600 text-white shadow-lg shadow-violet-500/25'
: 'text-slate-300 hover:text-white hover:bg-slate-800/50'
}`}
onClick={() => setIsMobileMenuOpen(false)}
>
Import Data
</Link>
<Link
to="/allscores"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
currentPage === 'allscores'
? 'bg-violet-600 text-white shadow-lg shadow-violet-500/25'
: 'text-slate-300 hover:text-white hover:bg-slate-800/50'
}`}
onClick={() => setIsMobileMenuOpen(false)}
>
Community Scores
</Link>
</>
);
return (
<nav className="border-b border-slate-800/50 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-linear-to-r from-violet-600 to-violet-700 rounded-lg flex items-center justify-center shadow-lg">
<span className="text-white font-bold text-sm">M</span>
</div>
<span className="text-white font-semibold text-lg">Mirage</span>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-4">
{menuOptions}
<span className="text-slate-300 text-sm">
Welcome back,{" "}
<span className="text-violet-400 font-medium">
{user.username}
</span>
</span>
<button
onClick={handleLogout}
className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
>
Sign Out
</button>
</div>
{/* Mobile menu button */}
<div className="flex md:hidden">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-slate-300 hover:text-white hover:bg-slate-800/50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet-500"
aria-expanded={isMobileMenuOpen}
>
<span className="sr-only">Open main menu</span>
{isMobileMenuOpen ? (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
) : (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
</button>
</div>
</div>
{/* Mobile Menu */}
{isMobileMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1">
{menuOptions}
<div className="border-t border-slate-800/50 mt-3 pt-3">
<div className="text-slate-300 text-sm px-4 py-2">
Welcome back,{" "}
<span className="text-violet-400 font-medium">
{user.username}
</span>
</div>
<button
onClick={() => {
handleLogout();
setIsMobileMenuOpen(false);
}}
className="w-full text-left text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
>
Sign Out
</button>
</div>
</div>
</div>
)}
</div>
</nav>
);
};
|
