70 lines
2.0 KiB
React
70 lines
2.0 KiB
React
|
import { NavLink, useLocation } from 'react-router-dom'
|
||
|
|
import { TreePine, FolderTree, Download } from 'lucide-react'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Admin-Seiten-Navigation (horizontal)
|
||
|
|
* Wechselt zwischen verschiedenen Admin-Seiten
|
||
|
|
*/
|
||
|
|
export default function AdminPageNav() {
|
||
|
|
const location = useLocation()
|
||
|
|
|
||
|
|
const pages = [
|
||
|
|
{ to: '/admin/hierarchy', label: 'Hierarchie', icon: TreePine },
|
||
|
|
{ to: '/admin/catalogs', label: 'Kataloge', icon: FolderTree },
|
||
|
|
{ to: '/admin/mediawiki-import', label: 'Wiki-Import', icon: Download }
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav style={{
|
||
|
|
display: 'flex',
|
||
|
|
gap: '8px',
|
||
|
|
borderBottom: '2px solid var(--border)',
|
||
|
|
marginBottom: '24px',
|
||
|
|
flexWrap: 'wrap'
|
||
|
|
}}>
|
||
|
|
{pages.map(page => {
|
||
|
|
const Icon = page.icon
|
||
|
|
const isActive = location.pathname === page.to
|
||
|
|
|
||
|
|
return (
|
||
|
|
<NavLink
|
||
|
|
key={page.to}
|
||
|
|
to={page.to}
|
||
|
|
style={{
|
||
|
|
padding: '12px 20px',
|
||
|
|
background: 'transparent',
|
||
|
|
border: 'none',
|
||
|
|
borderBottom: '3px solid transparent',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontSize: '16px',
|
||
|
|
fontWeight: 500,
|
||
|
|
color: isActive ? 'var(--accent)' : 'var(--text2)',
|
||
|
|
borderBottomColor: isActive ? 'var(--accent)' : 'transparent',
|
||
|
|
textDecoration: 'none',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '8px',
|
||
|
|
transition: 'all 0.2s'
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (!isActive) {
|
||
|
|
e.currentTarget.style.color = 'var(--text1)'
|
||
|
|
e.currentTarget.style.background = 'var(--surface2)'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
if (!isActive) {
|
||
|
|
e.currentTarget.style.color = 'var(--text2)'
|
||
|
|
e.currentTarget.style.background = 'transparent'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon size={18} />
|
||
|
|
<span>{page.label}</span>
|
||
|
|
</NavLink>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|