Spaces:
Sleeping
Sleeping
File size: 2,802 Bytes
3a19693 76089f2 3a19693 76089f2 3a19693 76089f2 3a19693 76089f2 | 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 | import { NavLink, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
const NAV = [
{ to: '/', label: '📊 Dashboard' },
{ to: '/leads', label: '👥 Leads' },
{ to: '/import', label: '📥 Import' },
{ to: '/scraper', label: '🔍 Scraper' },
]
export default function Navbar() {
const { user, isAdmin, logout } = useAuth()
const navigate = useNavigate()
const handleLogout = () => {
logout()
navigate('/login')
}
return (
<nav style={{
background: 'var(--surface)',
borderBottom: '1px solid var(--border)',
padding: '0 24px',
display: 'flex',
alignItems: 'center',
height: 56,
gap: 8,
position: 'sticky',
top: 0,
zIndex: 100,
}}>
<span style={{ fontWeight: 700, fontSize: 16, color: 'var(--accent)', marginRight: 24, whiteSpace: 'nowrap' }}>
🚀 LeadGen
</span>
{NAV.map(({ to, label }) => (
<NavLink
key={to}
to={to}
end={to === '/'}
style={({ isActive }) => ({
padding: '6px 14px',
borderRadius: 8,
color: isActive ? '#fff' : 'var(--text-muted)',
background: isActive ? 'var(--accent)' : 'transparent',
fontWeight: isActive ? 600 : 400,
fontSize: 14,
transition: 'all 0.15s',
whiteSpace: 'nowrap',
})}
>
{label}
</NavLink>
))}
{isAdmin && (
<NavLink
to="/admin"
style={({ isActive }) => ({
padding: '6px 14px',
borderRadius: 8,
color: isActive ? '#fff' : '#a78bfa',
background: isActive ? '#7c3aed' : 'rgba(124,58,237,0.1)',
fontWeight: isActive ? 600 : 500,
fontSize: 14,
transition: 'all 0.15s',
whiteSpace: 'nowrap',
})}
>
👑 Admin
</NavLink>
)}
{/* Spacer */}
<div style={{ flex: 1 }} />
{/* User info + logout */}
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ textAlign: 'right' }}>
<div style={{ fontSize: 13, fontWeight: 600 }}>{user?.full_name || user?.username}</div>
{user?.is_admin && <div style={{ fontSize: 11, color: '#a78bfa' }}>Administrator</div>}
</div>
<button
onClick={handleLogout}
style={{
background: 'var(--surface2)',
border: '1px solid var(--border)',
color: 'var(--text-muted)',
padding: '6px 12px',
borderRadius: 8,
fontSize: 13,
cursor: 'pointer',
}}
>
Sign out
</button>
</div>
</nav>
)
}
|