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 { useState, useEffect } from 'react'
|
||||||
import { api } from '../utils/api'
|
import { api } from '../utils/api'
|
||||||
|
import AdminPageNav from '../components/AdminPageNav'
|
||||||
|
|
||||||
export default function AdminCatalogsPage() {
|
export default function AdminCatalogsPage() {
|
||||||
const [activeTab, setActiveTab] = useState('focus-areas')
|
const [activeTab, setActiveTab] = useState('focus-areas')
|
||||||
|
|
@ -313,6 +314,8 @@ export default function AdminCatalogsPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: '16px', maxWidth: '1200px', margin: '0 auto' }}>
|
<div style={{ padding: '16px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<AdminPageNav />
|
||||||
|
|
||||||
<h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>
|
<h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { api } from '../utils/api'
|
import { api } from '../utils/api'
|
||||||
|
import AdminPageNav from '../components/AdminPageNav'
|
||||||
import HierarchyTab from '../components/admin/HierarchyTab'
|
import HierarchyTab from '../components/admin/HierarchyTab'
|
||||||
import CatalogsTab from '../components/admin/CatalogsTab'
|
import CatalogsTab from '../components/admin/CatalogsTab'
|
||||||
import AssignmentsTab from '../components/admin/AssignmentsTab'
|
import AssignmentsTab from '../components/admin/AssignmentsTab'
|
||||||
|
|
@ -93,6 +94,8 @@ function AdminHierarchyPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: '20px' }}>
|
<div style={{ padding: '20px' }}>
|
||||||
|
<AdminPageNav />
|
||||||
|
|
||||||
<h1 style={{ marginTop: 0 }}>Admin: Katalog-Hierarchie</h1>
|
<h1 style={{ marginTop: 0 }}>Admin: Katalog-Hierarchie</h1>
|
||||||
|
|
||||||
{/* Tab Navigation */}
|
{/* Tab Navigation */}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import api from '../utils/api'
|
import api from '../utils/api'
|
||||||
|
import AdminPageNav from '../components/AdminPageNav'
|
||||||
|
|
||||||
export default function MediaWikiImportPage() {
|
export default function MediaWikiImportPage() {
|
||||||
const [activeTab, setActiveTab] = useState('preview')
|
const [activeTab, setActiveTab] = useState('preview')
|
||||||
|
|
@ -103,6 +104,8 @@ export default function MediaWikiImportPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
|
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<AdminPageNav />
|
||||||
|
|
||||||
<h1>MediaWiki Import (Semantic MediaWiki)</h1>
|
<h1>MediaWiki Import (Semantic MediaWiki)</h1>
|
||||||
<p style={{ color: 'var(--text2)', marginBottom: '24px' }}>
|
<p style={{ color: 'var(--text2)', marginBottom: '24px' }}>
|
||||||
Importiere Übungen, Fähigkeiten und Methoden aus karatetrainer.net
|
Importiere Übungen, Fähigkeiten und Methoden aus karatetrainer.net
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user