Skip to content

Navigation bar component #46

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

Merged
3 commits merged into from
May 14, 2026
Merged

Navigation bar component #46

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
060affd
navbar but missing font for web3uoa log
Wuuuuu5 Apr 25, 2026
53056b2
Merge branch 'main' into nav_bar
rebeccafitzpatr May 13, 2026
5d268ad
Merge branch 'main' into nav_bar
rebeccafitzpatr May 13, 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
28 changes: 17 additions & 11 deletions src/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,14 @@ import { usePathname } from "next/navigation";
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: "#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: "#connect_wallet"}, // TODO: add wallet connection
//{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true } // not sure if need
];

export function Navbar() {
Expand All @@ -21,10 +25,11 @@ export function Navbar() {
const isHome = pathname === "/";

return (
<nav className={`top-0 left-0 right-0 z-50 py-4 text-foreground ${isHome ? "absolute bg-transparent" : "fixed bg-background/95 backdrop-blur-xl border-b border-border"}`}>
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
<nav className="absolute z-50 bg-[#404246]/60 backdrop-blur-md border-b border-white/10 flex justify-between items-center px-8 w-[80%] left-1/2 translate-x-[-50%] top-[5%]
rounded-full text-white shadow-lg whitespace-nowrap">
<div className="container h-16 flex items-center justify-between">
{/* Logo */}
<Link href="/" className="flex items-center gap-3 group">
<Link href="#" className="flex items-center group flex-shrink-0">
<img
src="/logo/web3uoa_logo.png"
alt="WEB3UOA"
Expand All @@ -34,12 +39,12 @@ export function Navbar() {
</Link>

{/* Desktop links */}
<div className="hidden md:flex items-center gap-8">
<div className="hidden md:flex items-center gap-15 absolute right-[-14%] -translate-x-1/2">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className={`text-sm font-bold tracking-wide transition-all ${link.isCTA ? "text-primary bg-primary/10 px-4 py-2 rounded-full border border-primary/20 hover:bg-primary/20 hover:-translate-y-0.5 shadow-sm" : "text-foreground/80 hover:text-primary"}`}
className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
>
{link.label}
</Link>
Expand Down Expand Up @@ -78,14 +83,14 @@ export function Navbar() {

{/* Mobile menu */}
{mobileOpen && (
<div className="md:hidden absolute top-full left-0 right-0 bg-background/98 backdrop-blur-xl border-b border-border shadow-lg">
<div className="md:hidden absolute top-full left-0 right-0 bg-[#404246]/60 backdrop-blur-md border-b border-border shadow-lg rounded-md">
<div className="container mx-auto px-6 py-6 flex flex-col gap-4">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
onClick={() => setMobileOpen(false)}
className={`text-base font-bold py-2 transition-colors border-b border-border/50 ${link.isCTA ? "text-primary" : "text-foreground/80 hover:text-primary"}`}
className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
>
{link.label}
</Link>
Expand All @@ -105,6 +110,7 @@ export function Navbar() {
>
<WalletButton />
</div>

<Button
size="lg"
className="rounded-xl font-bold mt-4 w-full h-12"
Expand Down
Loading