feat(privat/CV): sync to latest upstream (cv-upstream/main, 30f9608b)

2026-07-07 15:20:55 +02:00
parent 8ac664d33d
commit a4efabbc60
417 changed files with 48564 additions and 712 deletions
@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import './Navigation.css'
+
+export default function Navigation() {
+  const [scrolled, setScrolled] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const location = useLocation()
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 50)
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  // Close the mobile menu whenever navigation occurs.
+  function closeMenu() {
+    setMobileOpen(false)
+  }
+
+  const navLinks = [
+    { to: '/kniepunkt', label: 'Kniepunkt' },
+    { to: '/podcast', label: 'Podcast' },
+    { to: '/speaking', label: 'Speaking' },
+    { to: '/consulting', label: 'Beratung' },
+    { to: '/ueber-mich', label: 'Über mich' },
+    { to: '/kontakt', label: 'Kontakt' },
+  ]
+
+  return (
+    <nav className={`navigation ${scrolled ? 'scrolled' : ''}`}>
+      <div className="nav-container app-container">
+        <Link to="/" className="logo" onClick={closeMenu}>
+          <span className="logo-text">Dr. André Knie</span>
+        </Link>
+
+        <div className="nav-links">
+          {navLinks.map(link => (
+            <Link
+              key={link.to}
+              to={link.to}
+              className={`nav-link ${location.pathname === link.to ? 'active' : ''}`}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+
+        {/* Mobile hamburger (only visible on small screens) */}
+        <button
+          className={`hamburger ${mobileOpen ? 'active' : ''}`}
+          onClick={() => setMobileOpen(!mobileOpen)}
+          aria-label="Menü öffnen"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+
+      {/* Mobile dropdown */}
+      <div className={`nav-mobile ${mobileOpen ? 'open' : ''}`}>
+        {navLinks.map(link => (
+          <Link
+            key={link.to}
+            to={link.to}
+            className={`nav-mobile-link ${location.pathname === link.to ? 'active' : ''}`}
+            onClick={closeMenu}
+          >
+            {link.label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  )
+}