Next.js mit App -Router für export zu statische dateien

components/Navigation.jsx

@@ -0,0 +1,46 @@
+// src/components/Navigation.jsx
+import React, { useEffect, useState } from "react";
+import Link from "next/link"; // Importiere Link von Next.js
+import { useRouter } from "next/router";
+
+function Navigation() {
+  const router = useRouter();
+  const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert
+
+  useEffect(() => {
+    // Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert
+    setActiveLink(router.pathname);
+  }, [router.pathname]);
+
+  const menuItems = [
+    { name: "Übersicht", path: "/" },
+    { name: "Kabelüberwachung", path: "/Kabelueberwachung" },
+    { name: "Zutrittskontrolle", path: "/Access" }, // Pfad angepasst
+    { name: "Ein- und Ausgänge", path: "/Einausgaenge" },
+    { name: "Analoge Eingänge", path: "/AnalogeEingaenge" },
+    { name: "Meldungen", path: "/Meldungen" },
+  ];
+
+  return (
+    <aside className="w-1/6 flex-shrink-0 h-full mt-24">
+      <nav className="space-y-6 p-4">
+        {menuItems.map((item) => (
+          <Link href={item.path} key={item.name} legacyBehavior>
+            <a
+              className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
+                activeLink === item.path
+                  ? "bg-sky-500 text-white rounded-r-full" // Aktivierte Schaltfläche
+                  : "text-black hover:bg-gray-200 rounded-r-full" // Nicht aktive Schaltfläche bei Hover
+              }`}
+              onClick={() => setActiveLink(item.path)} // Setzt das aktive Element beim Klick
+            >
+              {item.name}
+            </a>
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}
+
+export default Navigation;