diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 5b63dd6..c73b2a7 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,45 +1,88 @@
"use client";
-import React, { useState } from "react";
+import { Sun, Moon } from 'lucide-react'
+import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Menu, X } from "lucide-react";
-import { useWallet } from "@/hooks/use-wallet";
-import { WalletButton } from "@/components/wallet-button";
-import { usePathname } from "next/navigation";
+import { useAccount } from "wagmi";
+import { isAllowedAdminAddress } from "@/lib/admin-auth";
import Link from "next/link";
const navLinks = [
- { label: "About", href: "/#about" },
- { label: "Events", href: "/#events" },
- { label: "Partners", href: "/#partners" },
- { label: "Claim your Web3 ID!", href: "/#identity", isCTA: true },
+ { 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
];
export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false);
- const { isAdmin } = useWallet();
- const pathname = usePathname();
- const isHome = pathname === "/";
+ const [theme, setTheme] = useState("light");
+ const [mounted, setMounted] = useState(false);
+ const { address } = useAccount();
+
+ 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";
+ setTheme(saved || preferred);
+ }, []);
+
+ // 3. Apply theme + save it whenever it changes for the theme
+ useEffect(() => {
+ document.documentElement.classList.add('theme-transitioning');
+
+ if (theme === "dark") {
+ document.documentElement.classList.add("dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ }
+
+ localStorage.setItem("theme", theme); // ← this saves it
+
+ setTimeout(() => {
+ document.documentElement.classList.remove('theme-transitioning');
+ }, 300);
+ }, [theme]);
+
+ const isAdmin = mounted && isAllowedAdminAddress(address);
return (
-