From bad16f57bfe5449c9a241ec80ae9f98117f62f70 Mon Sep 17 00:00:00 2001
From: Hannah dagemark <dagemark@student.chalmers.se>
Date: Mon, 31 Aug 2026 02:46:44 +0200
Subject: [PATCH] Make header render client side

---
 components/layout/Header.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 19eeb69..3da5a84 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
 import Hyperlink from "@/components/ui/Hyperlink";
 import { getServices } from "@/lib/api/helpers/services";
 import { Service } from "@/lib/api/types";
@@ -40,11 +44,19 @@ const defaultServices: Service[] = [
   },
 ];
 
-export default async function Header() {
-  let services = await getServices();
-  if (services.length < 1) {
-    services = defaultServices;
-  }
+export default function Header() {
+  const [services, setServices] = useState<Service[]>(defaultServices);
+  useEffect(() => {
+    getServices()
+      .then((services) => {
+        if (services.length > 0) {
+          setServices(services);
+        }
+      })
+      .catch(() => {
+        // Keep default services if the backend is not reached :C
+      });
+  }, []);
   return (
     <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
       <nav className="flex items-center justify-around w-full h-full px-6 py-4">