diff --git a/app/globals.css b/app/globals.css index 13d40b8..37ab8ec 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,4 @@ +/* global.css*/ @tailwind base; @tailwind components; @tailwind utilities; diff --git a/app/kabelueberwachung/page.jsx b/app/kabelueberwachung/page.jsx index 620c27a..53a0144 100644 --- a/app/kabelueberwachung/page.jsx +++ b/app/kabelueberwachung/page.jsx @@ -1,5 +1,6 @@ +"use client"; // Ganz oben hinzufügen import React, { useState } from "react"; -import Layout from "../components/Layout"; +import Layout from "../layout"; // Korrigierter Pfad zu Layout function Kabelueberwachung() { const [activeTab, setActiveTab] = useState(1); @@ -14,8 +15,6 @@ function Kabelueberwachung() { return (
- {" "} - {/* overflow-hidden hinzugefügt */} {/* Tabs */} {/* Rack-Inhalte */}
- {" "} - {/* max-h-full und overflow-auto für Inhalt */} {racks.map( (rack) => activeTab === rack.id && ( @@ -49,7 +46,6 @@ function Kabelueberwachung() {

{rack.name} Inhalte

- {/* Hier kannst du den Inhalt für jedes Rack einfügen */} diff --git a/app/layout.js b/app/layout.js index 84087ad..4b2ad95 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,21 +1,26 @@ -// src/components/Layout.jsx +"use client"; // Ganz oben hinzufügen import React from "react"; -import Header from "../components/Header"; // Passe den Pfad an, falls nötig -import Navigation from "../components/Navigation"; // Passe den Pfad an, falls nötig -import Footer from "../components/Footer"; // Passe den Pfad an, falls nötig +import Header from "../components/Header"; +import Navigation from "../components/Navigation"; +import Footer from "../components/Footer"; +import "../app/globals.css"; -function Layout({ children }) { +// Diese Datei befindet sich in /app/layout.jsx +export default function RootLayout({ children }) { return ( -
-
-
- - {/* Der eigentliche Seiteninhalt */} -
{children}
-
-
-
+ + + {/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */} + + + {/* Hier das Layout mit Header, Navigation und Footer */} +
+
+ +
{children}
+
+
+ + ); } - -export default Layout; diff --git a/app/page.js b/app/page.js index 7f0afc2..e7b9f15 100644 --- a/app/page.js +++ b/app/page.js @@ -3,99 +3,7 @@ import Image from "next/image"; export default function Home() { return (
-
- -
    -
  1. - Get started by editing{" "} - - app/page.js - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- - -
- +

Next.js startseite

); } diff --git a/components/Footer.jsx b/components/Footer.jsx index e14f6be..190f105 100644 --- a/components/Footer.jsx +++ b/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 ( diff --git a/components/Header.jsx b/components/Header.jsx index 382c59f..a36216c 100644 --- a/components/Header.jsx +++ b/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 ( diff --git a/components/Layout.jsx b/components/Layout.jsx deleted file mode 100644 index 420e34b..0000000 --- a/components/Layout.jsx +++ /dev/null @@ -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 ( -
-
-
- - {/* Der eigentliche Seiteninhalt */} -
{children}
-
-
-
- ); -} - -export default Layout; diff --git a/components/Navigation.jsx b/components/Navigation.jsx index 6e5f0c8..32df77d 100644 --- a/components/Navigation.jsx +++ b/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 (