Abmelden Seite eingefügt

components/Header.jsx

@@ -20,6 +20,11 @@ function Header() {
     setShowSettingsModal(false); // Schließe das Modal
   };
 
+  const handleLogout = () => {
+    // Öffnet die Seite offline.html im selben Fenster
+    window.location.href = "/offline.html";
+  };
+
   useEffect(() => {
     // Lade die Variablen vom Server und setze sie in `window`
     loadWindowVariables(apiUrl)
@@ -32,7 +37,7 @@ function Header() {
         console.error("Fehler beim Laden der Variablen:", error);
       });
   }, [apiUrl]);
-  //--------------------------------------------------------------------------------
+
   const files = [
     "de.acp",
     "kueConfig.acp",
@@ -58,7 +63,6 @@ function Header() {
     });
   }, []);
 
-  //--------------------------------------------------------------------------------
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
       {/* Logo - Vergrößert und verschoben */}
@@ -85,31 +89,6 @@ function Header() {
       <div className="flex items-start space-x-4 w-full"></div>
       {/* Temperatur und Icons */}
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
-        {/* Temperatur und Luftfeuchtigkeit */}
-        {/* 
-                    <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 min-w-0">
-          <i className="bi bi-droplet"></i>
-          <p className="text-lg ml-1">60%</p>
-        </div>
-            */}
-
-        {/* Toggle Switch light and dark mode */}
-        {/* 
-          <div className="flex items-center space-x-4 min-w-0 flex-shrink">
-          <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>
-        
-        */}
         {/* Settings Icon als Button */}
         <div className="flex items-center justify-end w-full">
           <button
@@ -119,12 +98,15 @@ function Header() {
             <i className="bi bi-gear"></i>
           </button>
         </div>
-        {/* User Icon */}
-        {/* 
-               <div className="flex items-center justify-end w-full">
-          <i className="bi bi-person-circle text-3xl text-black mr-7"></i>
+        {/* Logout Button */}
+        <div className="flex items-center justify-end w-full">
+          <button
+            onClick={handleLogout}
+            className="text bg-littwin-blue text-white px-4 py-2 rounded"
+          >
+            Abmelden
+          </button>
         </div>
-        */}
       </div>
       {/* SettingsModal wird angezeigt, wenn showSettingsModal true ist */}
       {showSettingsModal && (