From 5ca3ecbe5d5f7dff0a20d9367c435f2bcd0b0ce1 Mon Sep 17 00:00:00 2001 From: VyomeshJ Date: Thu, 21 May 2026 20:19:12 +1200 Subject: [PATCH 1/5] fix: added the wallet button to navbar and made it more responsive (was bugging before with the addition of the wallet button) --- src/components/navbar.tsx | 128 ++++++++++++++++++------------- src/components/wallet-button.tsx | 2 +- 2 files changed, 77 insertions(+), 53 deletions(-) diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index df90909..fd3e5d2 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,26 +1,19 @@ "use client"; -import { Sun, Moon } from 'lucide-react' + +import { Sun, Moon, Menu, X } from "lucide-react"; import React, { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; -import { Menu, X } from "lucide-react"; import { useAccount } from "wagmi"; import { isAllowedAdminAddress } from "@/lib/admin-auth"; import Link from "next/link"; -import { usePathname } from 'next/navigation'; - +import { usePathname } from "next/navigation"; +import { WalletButton } from "./wallet-button"; const navLinks = [ { label: "About", href: "/pages/about" }, { label: "Events", href: "/pages/events" }, { label: "Partners", href: "/pages/partners" }, - // { label: "Claim your Web3 ID!", href: "/pages/claim-id", isCTA: true }, - // { label: "About", href: "#about" }, - // { label: "Events", href: "#events" }, - // { label: "Partners", href: "#partners" }, - { label: "Search", href: "#search" }, // TODO: add search page - { label: "Join Us", href: "#join_us" }, // TODO: add Us - { label: "Connect Wallet", href: "/pages/claim-id" }, // TODO: add wallet connection - //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true } // not sure if need + { label: "Search", href: "#search" }, ]; export function Navbar() { @@ -29,21 +22,23 @@ export function Navbar() { const [mounted, setMounted] = useState(false); const { address } = useAccount(); + const pathname = usePathname(); + useEffect(() => { setMounted(true); }, []); - // save theme preference to localStorage for persistence across sessions - // read saved preference (client only) useEffect(() => { const saved = localStorage.getItem("theme") as "light" | "dark" | null; - const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + setTheme(saved || preferred); }, []); - // Apply theme + save it whenever it changes for the theme useEffect(() => { - document.documentElement.classList.add('theme-transitioning'); + document.documentElement.classList.add("theme-transitioning"); if (theme === "dark") { document.documentElement.classList.add("dark"); @@ -51,58 +46,64 @@ export function Navbar() { document.documentElement.classList.remove("dark"); } - localStorage.setItem("theme", theme); // ← this saves it + localStorage.setItem("theme", theme); - setTimeout(() => { - document.documentElement.classList.remove('theme-transitioning'); + const timeout = setTimeout(() => { + document.documentElement.classList.remove("theme-transitioning"); }, 300); + + return () => clearTimeout(timeout); }, [theme]); const isAdmin = mounted && isAllowedAdminAddress(address); - // Determine active link based on current pathname. Exact match or sub-route match counts as active. - // Will need to change the code after we add the search page and join us page - // currently they are just anchors on the home page so they won't be active when user is on the home page - const pathname = usePathname(); const isActive = (href: string) => { if (href.startsWith("#")) return false; - // exact match OR sub-route match return pathname === href || pathname.startsWith(href + "/"); }; + const toggleTheme = () => { + setTheme(theme === "light" ? "dark" : "light"); + }; + return ( -