From 89055ddbc488773c33e609a2c901f0c58fdec426 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 24 Apr 2026 17:03:13 +0200
Subject: [PATCH] feat: Admin page navigation with MediaWiki Import link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/src/components/AdminPageNav.jsx   | 69 ++++++++++++++++++++++
 frontend/src/pages/AdminCatalogsPage.jsx   |  3 +
 frontend/src/pages/AdminHierarchyPage.jsx  |  3 +
 frontend/src/pages/MediaWikiImportPage.jsx |  3 +
 4 files changed, 78 insertions(+)
 create mode 100644 frontend/src/components/AdminPageNav.jsx

diff --git a/frontend/src/components/AdminPageNav.jsx b/frontend/src/components/AdminPageNav.jsx
new file mode 100644
index 0000000..790ddbc
--- /dev/null
+++ b/frontend/src/components/AdminPageNav.jsx
@@ -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>
+  )
+}
diff --git a/frontend/src/pages/AdminCatalogsPage.jsx b/frontend/src/pages/AdminCatalogsPage.jsx
index 7ac479d..a5952d7 100644
--- a/frontend/src/pages/AdminCatalogsPage.jsx
+++ b/frontend/src/pages/AdminCatalogsPage.jsx
@@ -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 */}
diff --git a/frontend/src/pages/AdminHierarchyPage.jsx b/frontend/src/pages/AdminHierarchyPage.jsx
index 2409e31..1361d83 100644
--- a/frontend/src/pages/AdminHierarchyPage.jsx
+++ b/frontend/src/pages/AdminHierarchyPage.jsx
@@ -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 */}
diff --git a/frontend/src/pages/MediaWikiImportPage.jsx b/frontend/src/pages/MediaWikiImportPage.jsx
index 268feb4..2365ff6 100644
--- a/frontend/src/pages/MediaWikiImportPage.jsx
+++ b/frontend/src/pages/MediaWikiImportPage.jsx
@@ -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