Skip to content

feat(nav): standardize nav pill style and active state #113

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
utilityjnr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(nav): standardize nav pill style and active state #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
88 changes: 45 additions & 43 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client'

import { useState, useRef } from 'react'
import { usePathname } from 'next/navigation'
import { motion } from 'framer-motion'
import { Menu, X, ArrowRight } from 'lucide-react'
import Link from 'next/link'
Expand All @@ -9,14 +10,17 @@ import { ThemeToggle } from '@/components/theme-toggle'
import { ConnectButton } from '@/components/Wallet'

const navItems = [
{ label: 'Features', href: '#features' },
{ label: 'How it Works', href: '#how-it-works' },
{ label: 'Dashboard', href: '/dashboard' },
{ label: 'Transactions', href: '/dashboard/transactions' },
{ label: 'Wallets', href: '/dashboard/wallets' },
{ label: 'Settings', href: '/dashboard/settings' },
]

export function Navbar() {
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const navRef = useRef<HTMLDivElement>(null)
const pathname = usePathname()

return (
<motion.header
Expand All @@ -38,37 +42,30 @@ export function Navbar() {

{/* Desktop Nav Items */}
<div className="hidden md:flex items-center gap-1 relative">
{navItems.map((item, index) => (
<a
key={item.label}
href={item.href}
className="relative px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
{hoveredIndex === index && (
<motion.div
layoutId="navbar-hover"
className="absolute inset-0 bg-muted rounded-full"
initial={false}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
)}
<span className="relative z-10">{item.label}</span>
</a>
))}
<Link
href="/onramp"
className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Onramp
</Link>
<Link
href="/offramp"
className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Offramp
</Link>
{navItems.map((item, index) => {
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
return (
<Link
key={item.label}
href={item.href}
className={`relative px-4 py-2 text-sm rounded-full transition-colors font-medium
${isActive ? 'bg-primary text-white' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}
`}
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
{hoveredIndex === index && !isActive && (
<motion.div
layoutId="navbar-hover"
className="absolute inset-0 bg-muted rounded-full"
initial={false}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
)}
<span className="relative z-10">{item.label}</span>
</Link>
)
})}
</div>

{/* Right side: Theme Toggle and Connect Button */}
Expand Down Expand Up @@ -96,16 +93,21 @@ export function Navbar() {
className="absolute top-full left-0 right-0 mt-2 p-4 rounded-2xl bg-card/95 backdrop-blur-md border border-border shadow-lg"
>
<div className="flex flex-col gap-2">
{navItems.map((item) => (
<a
key={item.label}
href={item.href}
className="px-4 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
{item.label}
</a>
))}
{navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
return (
<Link
key={item.label}
href={item.href}
className={`px-4 py-3 text-sm rounded-lg transition-colors font-medium flex items-center
${isActive ? 'bg-primary text-white' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}
`}
onClick={() => setMobileMenuOpen(false)}
>
{item.label}
</Link>
)
})}
<Link
href="/onramp"
className="px-4 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors flex items-center justify-between"
Expand Down
Loading