From f8d5e456739b9728ffc6f0a77622918ffff1d709 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Wed, 15 Apr 2026 12:58:16 +0100
Subject: [PATCH] add theme button

---
 app/components/tvone-site-nav.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/app/components/tvone-site-nav.tsx b/app/components/tvone-site-nav.tsx
index a3be485..8d0877f 100644
--- a/app/components/tvone-site-nav.tsx
+++ b/app/components/tvone-site-nav.tsx
@@ -3,6 +3,8 @@
 import Link from "next/link";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
 
 const primaryNav = [
   { label: "Música", href: "#" },
@@ -69,6 +71,9 @@ export function TvoneSiteNav() {
 
   const closeMenu = useCallback(() => setMenuOpen(false), []);
   const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  
 
   useEffect(() => {
     const el = sentinelRef.current;
@@ -82,12 +87,14 @@ export function TvoneSiteNav() {
     sync();
     window.addEventListener("scroll", sync, { passive: true });
     window.addEventListener("resize", sync);
+    setMounted(true);
     return () => {
       window.removeEventListener("scroll", sync);
       window.removeEventListener("resize", sync);
     };
   }, []);
 
+  
   useEffect(() => {
     if (!menuOpen) return;
     const onKey = (e: KeyboardEvent) => {
@@ -163,6 +170,16 @@ export function TvoneSiteNav() {
             </ul>
 
             <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2">
+              {/* Theme Toggle */}
+              {mounted && (
+                <button
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10"
+                >
+                  {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
+                </button>
+              )}
+
               <button
                 type="button"
                 className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10 sm:h-11 sm:w-11"