feat: Header- und Navigationskomponenten angepasst

- Header-Layout optimiert, um Temperatur und Icons korrekt anzuzeigen.
- Anpassungen in der Navigation Abstand zwischen die Elemente.
- Verbesserte Ausrichtung und Abstände für Header-Elemente.
- Farbanpassungen und Styling-Optimierungen in der Header.
-Auf verschiedene Bildschirm Auflösungen getestet (Full-HD und 2K/QHD)

components/Header.jsx

@@ -24,7 +24,7 @@ function Header() {
   }, [apiUrl]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4 relative">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
       {/* Logo - Vergrößert und verschoben */}
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
         <Image
@@ -36,46 +36,45 @@ function Header() {
           priority={false}
         />
       </div>
-      <div className="w-1/6 flex-shrink-0 h-28"></div>
+      <div className="w-64 flex-shrink-0 h-full mt-24 "></div>
 
       {/* CPL Status und Stationsname */}
       <div className="flex items-start space-x-4 w-full">
-        <div className="flex flex-col text-left">
+        <div className="flex flex-col text-left pl-8">
           {/* Text immer linksbündig */}
-          <h2 className="text-sm font-semibold">Stationsname</h2>
-          <p className="font-bold text-lg">{stationsname}</p>
+          <h2 className="text-base ">Stationsname</h2>
+          <p className="text-base  text-gray-600">{stationsname}</p>
         </div>
       </div>
-
+      <div className="flex items-start space-x-4 w-full"></div>
       {/* Temperatur und Icons */}
-      <div className="flex items-center space-x-32 w-2/6">
+      <div className="p-4 w-full lg:w-full flex flex-row gap-3 justify-between">
         {/* Temperatur und Luftfeuchtigkeit */}
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center">
+        <div className="flex items-center space-x-4 min-w-0 flex-shrink">
+          <div className="flex items-center min-w-0">
             <i className="bi bi-thermometer-half"></i>
             <p className="text-lg ml-1">20.5 °C</p>
           </div>
 
-          <div className="flex items-center">
+          <div className="flex items-center min-w-0">
             <i className="bi bi-droplet"></i>
             <p className="text-lg ml-1">60%</p>
           </div>
         </div>
 
         {/* Toggle Switch light and dark mode */}
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-4 min-w-0 flex-shrink">
           <i className="bi bi-moon"></i>
           {/* Toggle Switch */}
           <div className="flex items-center space-x-2">
             <i className="bi bi-toggle-off"></i>
             <i className="bi bi-brightness-high"></i>
           </div>
-          {/* Leer div für flexiblen Abstand */}
         </div>
 
         {/* User Icon */}
-        <div>
-          <i className="bi bi-person-circle text-3xl text-black"></i>
+        <div className="min-w-0">
+          <i className="bi bi-person-circle text-3xl text-black mr-7"></i>
         </div>
       </div>
     </header>

components/Navigation.jsx

@@ -23,12 +23,12 @@ function Navigation() {
   ];
 
   return (
-    <aside className="w-1/6 flex-shrink-0 h-full mt-24">
-      <nav className="space-y-6 p-4">
+    <aside>
+      <nav className="w-64 flex-shrink-0 h-full mt-24">
         {menuItems.map((item) => (
           <Link href={item.path} key={item.name}>
             <div
-              className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
+              className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
                 activeLink === item.path
                   ? "bg-sky-500 text-white rounded-r-full"
                   : "text-black hover:bg-gray-200 rounded-r-full"

components/modulesStatus/Kue705_FO.jsx

@@ -0,0 +1,20 @@
+// components/Kue705_FO.jsx
+import React from "react";
+
+const Kue705_FO = () => {
+  return (
+    <div className="border border-gray-400 w-16 h-32 flex flex-col">
+      {/* Erstes Kind, nimmt den restlichen Platz ein */}
+      <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
+        <div className="flex flex-col justify-start">1</div>
+        <div>KÜ705</div>
+        <div>FO</div>
+      </div>
+      {/* Die unteren Abschnitte behalten ihre festen Höhen */}
+      <div className="bg-green-500 w-full h-1/6"></div>
+      <div className="bg-blue-500 w-full h-1/6"></div>
+    </div>
+  );
+};
+
+export default Kue705_FO;