style(nav): mark current link

app/[locale]/navbar.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { Fragment, useEffect, useState } from "react"
-import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { ThemeSwitch } from "../../components/custom/theme-switch"
 import { useTranslations } from "next-intl"
 import { LocaleSwitch } from "../../components/custom/locale-switch"
 import { Button } from "@/components/ui/button"
 import { Menu, X } from "lucide-react"
+import { Link, usePathname } from "@/i18n/navigation"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,6 +19,7 @@ import {
 export default function Navbar() {
   const [scrolled, setScrolled] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname()
   const t = useTranslations('pages');
 
   useEffect(() => {
@@ -47,6 +48,12 @@ export default function Navbar() {
     { href: "/projects", label: t("projects") },
   ];
 
+  const isActiveHref = (href: string) => {
+    if (!pathname) return false
+    if (href === "/") return pathname === "/"
+    return pathname === href || pathname.startsWith(`${href}/`)
+  }
+
   return (
     <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-4 md:p-10">
 
@@ -63,12 +70,19 @@ export default function Navbar() {
             : "border-foreground/0"
         )}
       >
-        <h1 className={cn("text-4xl font-medium")}>bH</h1>
+        <Link href="/"><h1 className={cn("text-4xl font-medium")}>bH</h1></Link>
 
         <ul className="hidden md:flex items-center gap-8 text-sm text-foreground/60">
           {navLinks.map((link) => (
             <li key={link.href}>
-              <Link href={link.href} className="hover:text-foreground transition">
+              <Link
+                href={link.href}
+                aria-current={isActiveHref(link.href) ? "page" : undefined}
+                className={cn(
+                  "transition hover:text-foreground",
+                  isActiveHref(link.href) && "text-foreground"
+                )}
+              >
                 {link.label}
               </Link>
             </li>
@@ -99,8 +113,11 @@ export default function Navbar() {
           >
             {navLinks.map((link, index) => (
               <Fragment key={link.href}>
-                <DropdownMenuItem asChild>
+                <DropdownMenuItem
-                  <Link href={link.href}>
+                  asChild
+                  className={cn(isActiveHref(link.href) && "font-medium text-foreground")}
+                >
+                  <Link href={link.href} aria-current={isActiveHref(link.href) ? "page" : undefined}>
                     {link.label}
                   </Link>
                 </DropdownMenuItem>