From 30f21ee78eab576224b0ca0829628b464b5a9aa3 Mon Sep 17 00:00:00 2001
From: Your Actual Name <youremail@example.com>
Date: Mon, 23 Mar 2026 22:53:11 +0100
Subject: [PATCH] feat(nav): standardize nav pill style and active state

---
 components/navbar.tsx | 88 ++++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index fbd01dc..9a18dd6 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -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'
@@ -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
@@ -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 */}
@@ -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"