feat: Navigation dar und light mode

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.736
+NEXT_PUBLIC_APP_VERSION=1.6.737
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.736
+NEXT_PUBLIC_APP_VERSION=1.6.737
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.737] – 2025-08-18
+
+- feat: playwright scraper
+
+---
 ## [1.6.736] – 2025-08-18
 
 - fix: window.location.pathname statt gestes Wert

components/header/Header.tsx

@@ -1,5 +1,6 @@
 "use client"; // components/Header.jsx
 import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import "bootstrap-icons/font/bootstrap-icons.css";
@@ -56,8 +57,21 @@ function Header() {
   }, [deviceName, dispatch]);
   //----------------------------------------------------------------
 
+  // Dark/Light Mode Toggle
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const html = document.documentElement;
+      if (isDark) {
+        html.classList.add("dark");
+      } else {
+        html.classList.remove("dark");
+      }
+    }
+  }, [isDark]);
+
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
+    <header className="bg-gray-300 dark:bg-gray-800 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black dark:text-white ">
       <div
         className="absolute transform -translate-y-1/2 
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
@@ -98,16 +112,20 @@ function Header() {
       </div>
 
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
-        <div className="flex items-center justify-end w-full">
-          {/* Admin-Login */}
-          {/* 
+        <div className="flex items-center justify-end w-full gap-4">
+          {/* Dark/Light Mode Toggle */}
           <button
-            onClick={handleSettingsClick}
-            className="text-3xl text-black mr-0"
+            aria-label={isDark ? "Light Mode" : "Dark Mode"}
+            onClick={() => setIsDark((d) => !d)}
+            className="rounded-full p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
+            title={isDark ? "Light Mode" : "Dark Mode"}
           >
-            <i className="bi bi-gear"></i>
+            {isDark ? (
+              <Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
+            ) : (
+              <Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
+            )}
           </button>
-          */}
         </div>
 
         {/* Logout-Button - nur anzeigen wenn Admin eingeloggt ist */}

components/navigation/Navigation.tsx

@@ -36,23 +36,23 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
   ];
 
   return (
-    <aside>
+    <aside className="bg-white dark:bg-gray-900 h-full">
       <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
         {menuItems.map((item) => (
           <div key={item.name}>
             {item.disabled ? (
-              <div className="block px-4 py-2 mb-4 font-bold whitespace-nowrap text-gray-400 cursor-not-allowed text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg">
+              <div className="block px-4 py-2 mb-4 font-bold whitespace-nowrap text-gray-400 dark:text-gray-600 cursor-not-allowed text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg">
                 {item.name}
               </div>
             ) : (
               <Link
                 href={formatPath(item.path)}
                 prefetch={false}
-                onClick={() => setActiveLink(item.path)} // Sofortige visuelle Rückmeldung
+                onClick={() => setActiveLink(item.path)}
                 className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
                   activeLink.startsWith(item.path)
-                    ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full"
-                    : "text-black hover:bg-gray-200 rounded-r-full"
+                    ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full dark:bg-sky-600 dark:text-white"
+                    : "text-black hover:bg-gray-200 rounded-r-full dark:text-gray-200 dark:hover:bg-gray-800"
                 }`}
               >
                 {item.name}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.736",
+  "version": "1.6.737",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.736",
+      "version": "1.6.737",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.736",
+  "version": "1.6.737",
   "private": true,
   "scripts": {
     "dev": "next dev",

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",