feat: Admin page navigation with MediaWiki Import link
- 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:
parent
df569bbf6e
commit
89055ddbc4
69
frontend/src/components/AdminPageNav.jsx
Normal file
69
frontend/src/components/AdminPageNav.jsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user