From 7a42e3c41c4c3fa07c4623f9ee5db0d3e3c17411 Mon Sep 17 00:00:00 2001
From: caitlin <caitzhermanus@gmail.com>
Date: Thu, 18 Jun 2026 09:38:06 +0200
Subject: [PATCH] I fixed the runtime error that appeared. I fixed the size
 error regarding both graphs.

---
 src/components/layout/topbar.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 119d69f..3a9e7d5 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
@@ -36,7 +36,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
   const { user } = useUser()
+  const [mounted, setMounted] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   return (
@@ -73,7 +76,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
         </Button>
 
         {/* Notifications */}