Move Projekt-KIQ-HP bahn/ -> dhive/ (dhive project); add steering files

2026-06-30 21:15:59 +02:00
parent d9291f53e4
commit b0e452708a
124 changed files with 74 additions and 0 deletions
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import './Navigation.css';
+
+export default function Navigation() {
+  const [scrolled, setScrolled] = useState(false);
+  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Close overlay on route change — use a layout effect to avoid setState-in-body lint
+  const prevPathRef = React.useRef(location.pathname);
+  React.useLayoutEffect(() => {
+    if (prevPathRef.current !== location.pathname) {
+      prevPathRef.current = location.pathname;
+      setIsOverlayOpen(false);
+    }
+  }, [location.pathname]);
+
+  return (
+    <>
+      <nav className={`navigation ${scrolled ? 'scrolled glass-panel' : ''}`}>
+        <div className="nav-container app-container">
+          <Link to="/" className="logo">
+            <img src="/logos/logo-dHIVE-2x.webp" alt="d-HIVE Logo" className="logo-image" />
+          </Link>
+          
+          <button 
+            className={`hamburger ${isOverlayOpen ? 'active' : ''}`}
+            onClick={() => setIsOverlayOpen(!isOverlayOpen)}
+            aria-label="Toggle menu"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Overlay Menu */}
+      <div className={`nav-overlay ${isOverlayOpen ? 'open' : ''}`}>
+        <div className="overlay-content">
+          <Link to="/" className="overlay-link" onClick={() => setIsOverlayOpen(false)}>Home</Link>
+          <Link to="/usecases" className="overlay-link" onClick={() => setIsOverlayOpen(false)}>Use Cases</Link>
+          <Link to="/request-access" className="overlay-link" onClick={() => setIsOverlayOpen(false)}>Request Access</Link>
+        </div>
+      </div>
+    </>
+  );
+}