120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
|
|
function Navigation() {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const { user, logout } = useAuth()
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
navigate('/login')
|
|
}
|
|
|
|
const isActive = (path) => location.pathname === path
|
|
|
|
return (
|
|
<nav style={{
|
|
background: 'var(--surface)',
|
|
borderBottom: '1px solid var(--border)',
|
|
padding: '0 1rem',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1000
|
|
}}>
|
|
<div style={{
|
|
maxWidth: '1200px',
|
|
margin: '0 auto',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
height: '60px'
|
|
}}>
|
|
{/* Logo/Title */}
|
|
<Link to="/" style={{
|
|
fontSize: '1.25rem',
|
|
fontWeight: 600,
|
|
color: 'var(--text1)',
|
|
textDecoration: 'none'
|
|
}}>
|
|
🥋 Shinkan
|
|
</Link>
|
|
|
|
{/* Main Navigation */}
|
|
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
|
|
<Link
|
|
to="/"
|
|
style={{
|
|
color: isActive('/') ? 'var(--accent)' : 'var(--text2)',
|
|
textDecoration: 'none',
|
|
fontWeight: isActive('/') ? 600 : 400
|
|
}}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
to="/exercises"
|
|
style={{
|
|
color: isActive('/exercises') ? 'var(--accent)' : 'var(--text2)',
|
|
textDecoration: 'none',
|
|
fontWeight: isActive('/exercises') ? 600 : 400
|
|
}}
|
|
>
|
|
Übungen
|
|
</Link>
|
|
<Link
|
|
to="/clubs"
|
|
style={{
|
|
color: isActive('/clubs') ? 'var(--accent)' : 'var(--text2)',
|
|
textDecoration: 'none',
|
|
fontWeight: isActive('/clubs') ? 600 : 400
|
|
}}
|
|
>
|
|
Vereine
|
|
</Link>
|
|
<Link
|
|
to="/profile"
|
|
style={{
|
|
color: isActive('/profile') ? 'var(--accent)' : 'var(--text2)',
|
|
textDecoration: 'none',
|
|
fontWeight: isActive('/profile') ? 600 : 400
|
|
}}
|
|
>
|
|
Profil
|
|
</Link>
|
|
|
|
{/* User Menu */}
|
|
<div style={{
|
|
borderLeft: '1px solid var(--border)',
|
|
paddingLeft: '1rem',
|
|
marginLeft: '0.5rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.75rem'
|
|
}}>
|
|
<span style={{ color: 'var(--text2)', fontSize: '0.875rem' }}>
|
|
{user?.name || user?.email}
|
|
</span>
|
|
<button
|
|
onClick={handleLogout}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
background: 'transparent',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '6px',
|
|
color: 'var(--text2)',
|
|
cursor: 'pointer',
|
|
fontSize: '0.875rem'
|
|
}}
|
|
>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navigation
|