prettier plus updates to the header entry. Stream gets iframe page instead of redirect

frontend/src/components/Header.jsx

@@ -1,43 +1,47 @@
 import Aku from "../assets/images/aku.png";
 
 export default function Header({ theme }) {
-  const { theme: currentTheme, toggleTheme } = theme;
+    const { theme: currentTheme, toggleTheme } = theme;
 
-  const navItems = [
-    { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
-    { label: "Navidrome", url: "https://music.aramjonghu.nl" },
-    { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
-    { label: "Stream", url: "https://stream.aramjonghu.nl" },
-    { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
-    { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
-  ];
+    const navItems = [
+        { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
+        { label: "Navidrome", url: "https://music.aramjonghu.nl" },
+        { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
+        { label: "Stream", url: "/stream" },
+        { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
+        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
+    ];
 
-  const goHome = () => {
-    window.location.href = "/";
-  };
+    const goHome = () => {
+        window.location.href = "/";
+    };
 
-  return (
-    <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
-      <img
-        className="size-16 cursor-pointer"
-        src={Aku}
-        alt="Home"
-        onClick={goHome}
-      />
+    return (
+        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
+            <img
+                className="size-16 cursor-pointer"
+                src={Aku}
+                alt="Home"
+                onClick={goHome}
+            />
 
-      <nav className="flex flex-wrap gap-3 items-center">
-        {navItems.map((item) => (
-          <a key={item.label} href={item.url} className="ui-btn ui-btn:hover">
-            {item.label}
-          </a>
-        ))}
-      </nav>
+            <nav className="flex flex-wrap gap-3 items-center">
+                {navItems.map((item) => (
+                    <a
+                        key={item.label}
+                        href={item.url}
+                        className="ui-btn ui-btn:hover"
+                    >
+                        {item.label}
+                    </a>
+                ))}
+            </nav>
 
-      <div>
-        <button className="ui-btn ui-btn:hover" onClick={toggleTheme}>
-          {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
-        </button>
-      </div>
-    </header>
-  );
+            <div>
+                <button className="ui-btn ui-btn:hover" onClick={toggleTheme}>
+                    {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
+                </button>
+            </div>
+        </header>
+    );
 }