Skip to content

Hambuger drop-down has no background coverage causing overlapping of homepage and drop down component #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aniket866 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Hambuger drop-down has no background coverage causing overlapping of homepage and drop down component #30

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0b37103
fixing-hamburger
aniket866 Feb 9, 2026
e509c95
Code rabbit follow-up
aniket866 Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 103 additions & 131 deletions web/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,174 +9,146 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useAccount } from "wagmi";
import VouchMeLogo from "../image/VouchMeLogo.png";

const NAVY_BG = "#0B1C2D";
const SHEET_HEIGHT = "100vh";

const Navbar = ({
toggleWalletConfig,
useEnhancedConfig,
}: {
toggleWalletConfig: () => void;
useEnhancedConfig: boolean;
}) => {
const [isOpen, setIsOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const { address } = useAccount();
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);

const pathname = usePathname();
const { address } = useAccount();

const isAuthenticated = !!address;
const isLandingPage = pathname === "/";
const isLanding = pathname === "/";
const isAuth = !!address;

/* Navbar background on scroll */
useEffect(() => {
if (isLandingPage) {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50);
};

window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
if (!isLanding) {
setScrolled(true);
return;
}
}, [isLandingPage]);

const scrollToSection = (sectionId: string) => {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
setIsOpen(false);
}
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener("scroll", onScroll);
onScroll();

return () => window.removeEventListener("scroll", onScroll);
}, [isLanding]);

/* Lock body scroll */
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
return () => {
document.body.style.overflow = "";
};
}, [open]);

const scrollTo = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
setOpen(false);
};

return (
<nav
className={
isLandingPage
? `fixed top-0 w-full z-50 transition-all duration-300 ${
isScrolled
? "bg-black/80 backdrop-blur-md border-b border-gray-800/50"
: "bg-transparent"
}`
: "bg-[#171717]"
}
>
<div className="w-full px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
<Link href="/" className="flex items-center space-x-3">
<div className="flex items-center justify-center w-10 h-10">
<Image
src={VouchMeLogo}
alt="VouchMe Logo"
width={40}
height={40}
className="object-contain"
/>
</div>
<span className="text-white text-2xl font-bold">VouchMe</span>
<>
{/* NAVBAR */}
<nav
className={`fixed top-0 w-full z-50 transition-all ${
!isLanding || scrolled
? "bg-black/80 backdrop-blur border-b border-gray-800"
: "bg-transparent"
}`}
>
<div className="h-20 px-4 flex items-center justify-between">
<Link href="/" className="flex items-center gap-3">
<Image src={VouchMeLogo} alt="VouchMe" width={36} height={36} />
<span className="text-white text-xl font-bold">VouchMe</span>
</Link>

{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-8">
{isLandingPage && (
<>
<button
onClick={() => setOpen(true)}
className="md:hidden text-white p-2"
>
<Menu size={26} />
</button>

<div className="hidden md:flex">
<ConnectButton />
</div>
</div>
</nav>

{/* BACKDROP */}
{open && (
<div
className="fixed inset-0 z-40 bg-black/60 md:hidden"
onClick={() => setOpen(false)}
/>
)}

{/* FULL-SCREEN MENU */}
{open && (
<div
className="fixed inset-0 z-50 md:hidden"
style={{ height: SHEET_HEIGHT, backgroundColor: NAVY_BG }}
>
{/* HEADER */}
<div className="h-16 px-5 flex items-center justify-between border-b border-white/10">
<span className="text-white text-lg font-semibold">Menu</span>
<button onClick={() => setOpen(false)} className="text-white">
<X size={24} />
</button>
</div>

{/* CONTENT */}
<div className="h-[calc(100vh-64px)] overflow-y-auto px-6 py-6 space-y-8 text-white">
{isLanding && (
<div className="space-y-4">
<button
onClick={() => scrollToSection("features")}
className="text-gray-300 hover:text-white transition-colors font-semibold"
onClick={() => scrollTo("features")}
className="block w-full text-left text-base font-medium tracking-wide"
>
Why VouchMe
</button>
<button
onClick={() => scrollToSection("footer")}
className="text-gray-300 hover:text-white transition-colors font-semibold"
onClick={() => scrollTo("footer")}
className="block w-full text-left text-base font-medium tracking-wide"
>
About Us
</button>
</>
</div>
)}

{!isAuthenticated && (
<div className="border-t border-white/10 pt-6">
<div className="bg-white/5 rounded-2xl px-5 py-4 flex items-center justify-between">
<span className="text-sm opacity-80">Wallet</span>
<ConnectButton />
</div>
</div>

{!isAuth && (
<button
onClick={toggleWalletConfig}
className="bg-gray-700 hover:bg-gray-800 text-white px-4 py-2 rounded-lg font-medium transition-colors"
onClick={() => {
toggleWalletConfig();
setOpen(false);
}}
className="w-full bg-indigo-600 hover:bg-indigo-700 py-3 rounded-2xl font-semibold transition"
>
{useEnhancedConfig
? "Disable ReOwn Wallets"
: "Enable ReOwn Wallets"}
</button>
)}

<ConnectButton />
</div>

{/* Mobile Menu Button */}
<div className="md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="text-gray-300 hover:text-white p-2"
>
{isOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>
</div>

{/* Mobile Navigation */}
{isOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-3">
{isLandingPage && (
<>
<button
onClick={() => scrollToSection("features")}
className="block w-full text-left px-3 py-2 text-gray-300 hover:text-white transition-colors"
>
Why VouchMe
</button>
<button
onClick={() => scrollToSection("footer")}
className="block w-full text-left px-3 py-2 text-gray-300 hover:text-white transition-colors"
>
About Us
</button>
</>
)}

{!isLandingPage && isAuthenticated && (
<>
<Link
href="/dashboard"
className="block w-full text-left px-3 py-2 text-gray-300 hover:text-white transition-colors"
onClick={() => setIsOpen(false)}
>
Dashboard
</Link>
<Link
href="/profile"
className="block w-full text-left px-3 py-2 text-gray-300 hover:text-white transition-colors"
onClick={() => setIsOpen(false)}
>
Profile
</Link>
</>
)}

{!isAuthenticated && (
<button
onClick={toggleWalletConfig}
className="block w-auto text-left px-3 py-2 bg-gray-700 hover:bg-gray-800 text-white rounded-lg font-medium transition-colors"
>
{useEnhancedConfig
? "Disable ReOwn Wallets"
: "Enable ReOwn Wallets"}
</button>
)}

<div className="py-2">
<ConnectButton />
</div>
</div>
</div>
)}
</div>
</nav>
)}
</>
);
};

Expand Down