feat: Admin page navigation with MediaWiki Import link
Some checks failed
Deploy Development / deploy (push) Successful in 36s
Test Suite / lint-backend (push) Successful in 0s
Test Suite / build-frontend (push) Successful in 5s
Test Suite / playwright-tests (push) Failing after 1m55s

- New AdminPageNav component with horizontal navigation
- Links to Hierarchie / Kataloge / Wiki-Import
- Integrated in all 3 admin pages
- Uses lucide-react icons (TreePine, FolderTree, Download)
- Active state tracking via useLocation
- Mobile-friendly with flexbox layout

Navigation flow:
/admin/hierarchy → /admin/catalogs → /admin/mediawiki-import
This commit is contained in:
Lars 2026-04-24 17:03:13 +02:00
parent df569bbf6e
commit 89055ddbc4
4 changed files with 78 additions and 0 deletions

View File

@ -0,0 +1,69 @@
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>
)
}

View File

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react'
import { api } from '../utils/api'
import AdminPageNav from '../components/AdminPageNav'
export default function AdminCatalogsPage() {
const [activeTab, setActiveTab] = useState('focus-areas')
@ -313,6 +314,8 @@ export default function AdminCatalogsPage() {
return (
<div style={{ padding: '16px', maxWidth: '1200px', margin: '0 auto' }}>
<AdminPageNav />
<h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>
{/* Tabs */}

View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { api } from '../utils/api'
import AdminPageNav from '../components/AdminPageNav'
import HierarchyTab from '../components/admin/HierarchyTab'
import CatalogsTab from '../components/admin/CatalogsTab'
import AssignmentsTab from '../components/admin/AssignmentsTab'
@ -93,6 +94,8 @@ function AdminHierarchyPage() {
return (
<div style={{ padding: '20px' }}>
<AdminPageNav />
<h1 style={{ marginTop: 0 }}>Admin: Katalog-Hierarchie</h1>
{/* Tab Navigation */}

View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import api from '../utils/api'
import AdminPageNav from '../components/AdminPageNav'
export default function MediaWikiImportPage() {
const [activeTab, setActiveTab] = useState('preview')
@ -103,6 +104,8 @@ export default function MediaWikiImportPage() {
return (
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
<AdminPageNav />
<h1>MediaWiki Import (Semantic MediaWiki)</h1>
<p style={{ color: 'var(--text2)', marginBottom: '24px' }}>
Importiere Übungen, Fähigkeiten und Methoden aus karatetrainer.net