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

components/Footer.jsx

@@ -0,0 +1,21 @@
+// src/components/Footer.jsx
+import React from 'react';
+
+function Footer() {
+  return (
+    <footer className="bg-gray-300 p-4 flex-shrink-0">
+      <div className="container mx-auto flex justify-between">
+        <div>
+          <p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>
+        </div>
+        <div className="flex space-x-4">
+          <p className="text-sm">Telefon: 04402 972577-0</p>
+          <p className="text-sm">E-Mail: kontakt@littwin-systemtechnik.de</p>
+          <p className="text-sm">Handbücher</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

components/Header.jsx

@@ -0,0 +1,63 @@
+// src/components/Header.jsx
+import React from "react";
+import Image from "next/image";
+
+function Header() {
+  return (
+    <header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4">
+      <div className="relative w-1/4 h-full">
+        <Image
+          src="/images/Logo.png"
+          alt="Logo"
+          fill
+          style={{ objectFit: "contain" }}
+          className="absolute -bottom-8 transform translate-y-1/2"
+          priority={false}
+        />
+      </div>
+
+      {/* CPL Status und Stationsname */}
+      <div className="flex items-center space-x-4 w-full justify-center">
+        <div className="flex flex-col text-left">
+          <h2 className="text-sm font-semibold">Stationsname</h2>
+          <p className="font-bold text-lg">CPLV4Rastede</p>
+        </div>
+        <div className="flex flex-col text-left">
+          <p className="text-sm font-medium">CPL Status</p>
+          <span className="text-green-500 font-bold">normiert</span>
+        </div>
+      </div>
+
+      {/* Temperatur und Icons */}
+      <div className="flex items-center space-x-4 w-1/4 justify-end">
+        {/* Temperatur und Luftfeuchtigkeit */}
+        <div className="hidden sm:flex items-center space-x-4">
+          <div className="flex items-center">
+            <i className="bi bi-thermometer-half"></i>
+            <p className="text-lg ml-1">20.5 °C</p>
+          </div>
+          <div className="flex items-center">
+            <i className="bi bi-droplet"></i>
+            <p className="text-lg ml-1">60%</p>
+          </div>
+        </div>
+
+        {/* Toggle Switch light and dark mode */}
+        <div className="hidden sm:flex items-center space-x-4">
+          <i className="bi bi-moon"></i>
+          <div className="flex items-center space-x-2">
+            <i className="bi bi-toggle-off"></i>
+            <i className="bi bi-brightness-high"></i>
+          </div>
+        </div>
+
+        {/* User Icon */}
+        <div className="flex items-center">
+          <i className="bi bi-person-circle text-3xl text-black"></i>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

components/Layout.jsx

@@ -0,0 +1,21 @@
+// 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

@@ -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;