diff --git a/components/navbar.tsx b/components/navbar.tsx index 6d85c74..d096e27 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,5 +1,23 @@ // // 'use client' +import Link from 'next/link' +import { Button } from '@/components/ui/button' +import { Menu, X, Wallet, User, Settings, LogOut, ChevronDown } from 'lucide-react' +import { useState } from 'react' +import { ThemeToggle } from './ui/ThemeToggle' + +export function Navbar() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) + const [profileDropdownOpen, setProfileDropdownOpen] = useState(false) + + // ⚡ Wallet Connection states (Wire these up to your Stellar/Wallet adapter hooks later) + const [isConnected, setIsConnected] = useState(true) + const walletAddress = "GBXW...4Y2T" + + const closeMenus = () => { + setMobileMenuOpen(false) + setProfileDropdownOpen(false) + } // // import Link from 'next/link' // // import { Button } from '@/components/ui/button' // // import { Menu, X, Wallet } from 'lucide-react' @@ -227,6 +245,8 @@ export function Navbar() { + ) ); } \ No newline at end of file diff --git a/components/ui/ThemeToggle.tsx b/components/ui/ThemeToggle.tsx index e75a774..5b15482 100644 --- a/components/ui/ThemeToggle.tsx +++ b/components/ui/ThemeToggle.tsx @@ -11,9 +11,57 @@ import { } from "@/components/ui/dropdown-menu"; export function ThemeToggle() { + const [dark, setDark] = useState(false); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + const isDark = + savedTheme === "dark" || + (!savedTheme && + window.matchMedia("(prefers-color-scheme: dark)").matches); + + // eslint-disable-next-line react-hooks/set-state-in-effect + setDark(isDark); + setMounted(true); + }, []); + + // Synchronize the HTML class when state changes + useEffect(() => { + if (!mounted) return; + + if (dark) { + document.documentElement.classList.add("dark"); + localStorage.setItem("theme", "dark"); + } else { + document.documentElement.classList.remove("dark"); + localStorage.setItem("theme", "light"); + } + }, [dark, mounted]); + + const toggleTheme = () => { + setDark((prev) => !prev); + }; const { setTheme } = useTheme(); + // Render a completely identical placeholder structure during server side compilation + if (!mounted) { + return ( +