diff --git a/frontend/index.html b/frontend/index.html index 6b6278da..3a7010b6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -22,6 +22,10 @@ + + \ No newline at end of file diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 74ac36ed..8ab1cc41 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -1,6 +1,6 @@ import { ConnectButton } from "@rainbow-me/rainbowkit"; import NetworkSwitcher from "./NetworkSwitcher"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { Link, useNavigate, useLocation } from "react-router-dom"; import { useAccount } from "wagmi"; import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet"; @@ -18,6 +18,8 @@ function Navbar() { const [hasConnected, setHasConnected] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const shareButtonRef = useRef(null); + const initRef = useRef(false); // Improved active route detection const isActive = (path) => { @@ -42,6 +44,44 @@ function Navbar() { window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, [isConnected, hasConnected, navigate, location.pathname, address]); + useEffect(() => { + const initButton = () => { + if (initRef.current || !window.SocialShareButton) return; + + shareButtonRef.current = new window.SocialShareButton({ + container: "#share-button", + }); + initRef.current = true; + }; + + if (window.SocialShareButton) { + initButton(); + } + + const checkInterval = setInterval(() => { + if (window.SocialShareButton) { + clearInterval(checkInterval); + initButton(); + } + }, 100); + + return () => { + clearInterval(checkInterval); + if (shareButtonRef.current?.destroy) { + shareButtonRef.current.destroy(); + } + initRef.current = false; + }; + }, []); + + useEffect(() => { + if (shareButtonRef.current?.updateOptions) { + shareButtonRef.current.updateOptions({ + url: window.location.href, + title: document.title, + }); + } + }, [location.pathname, location.hash]); const handleScroll = (sectionId) => { if (location.pathname !== "/") { @@ -224,6 +264,15 @@ function Navbar() { ))} + {/* ADD THIS: Social share button container left of About */} + +
+ +