Startseite und Kabelüberwachung

components/Footer.jsx

@@ -1,5 +1,5 @@
-// src/components/Footer.jsx
-import React from 'react';
+// components/Footer.jsx
+import React from "react";
 
 function Footer() {
   return (

components/Header.jsx

@@ -1,6 +1,7 @@
-// src/components/Header.jsx
+// components/Header.jsx
 import React from "react";
 import Image from "next/image";
+import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Header() {
   return (

components/Layout.jsx

@@ -1,21 +0,0 @@
-// src/components/Layout.jsx
-import React from "react";
-import Header from "./Header"; // Passe den Pfad an, falls nötig
-import Navigation from "./Navigation"; // Passe den Pfad an, falls nötig
-import Footer from "./Footer"; // Passe den Pfad an, falls nötig
-
-function Layout({ children }) {
-  return (
-    <div className="bg-gray-100 flex flex-col min-h-screen">
-      <Header className="bg-gray-300 p-4 flex-shrink-0" />
-      <div className="flex flex-grow w-full">
-        <Navigation />
-        {/* Der eigentliche Seiteninhalt */}
-        <main className="flex-1 p-8">{children}</main>
-      </div>
-      <Footer className="bg-gray-300 p-4 flex-shrink-0" />
-    </div>
-  );
-}
-
-export default Layout;

components/Navigation.jsx

@@ -1,41 +1,41 @@
-// src/components/Navigation.jsx
+"use client";
 import React, { useEffect, useState } from "react";
-import Link from "next/link"; // Importiere Link von Next.js
-import { useRouter } from "next/router";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 function Navigation() {
-  const router = useRouter();
-  const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert
+  const pathname = usePathname();
+  const [activeLink, setActiveLink] = useState("");
 
   useEffect(() => {
-    // Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert
-    setActiveLink(router.pathname);
-  }, [router.pathname]);
+    if (pathname) {
+      setActiveLink(pathname);
+    }
+  }, [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" },
+    { name: "Kabelüberwachung", path: "/kabelueberwachung" },
+    { name: "Zutrittskontrolle", path: "/access" },
+    { 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
+          <Link href={item.path} key={item.name}>
+            <div
               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
+                  ? "bg-sky-500 text-white rounded-r-full"
+                  : "text-black hover:bg-gray-200 rounded-r-full"
               }`}
-              onClick={() => setActiveLink(item.path)} // Setzt das aktive Element beim Klick
             >
               {item.name}
-            </a>
+            </div>
           </Link>
         ))}
       </nav>