From 0c5d360c52eeb864340c249b0f913d8983fe95fd Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:17:35 -0700
Subject: [PATCH] feat(components:navbar): highlight active links

  ## what
  - highlight active links

  ## how
  - use css classname from `globals.css`
    - nav-link
      - highlight link on hover
    - active-nav-link
      - highlight link when link href is the same as the url pathname

  ## why

  ## where
  - ./src/components/navbar.tsx

  ## usage
---
 src/components/navbar.tsx | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 43584c5..a1d6941 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 import { cn } from "@/lib/utils";
 import { ModeToggle } from "@/components/darkmode-toggle";
@@ -9,6 +12,8 @@ const links = [
 ];
 
 const Navbar = ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => {
+  const pathname = usePathname();
+
   return (
     <header className="flex flex-col justify-between md:flex border-b w-full sticky top-0 z-50 bg-background">
       <nav
@@ -18,15 +23,20 @@ const Navbar = ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => {
         )}
         {...props}
       >
-        {links.map((link) => (
-          <Link
-            key={link.label}
-            href={link.href}
-            className="text-lg font-medium rounded-lg px-2 py-2 hover:bg-zinc-800 hover:underline"
-          >
-            {link.label}
-          </Link>
-        ))}
+        <div className="flex items-center gap-2">
+          {links.map((link) => (
+            <Link
+              key={link.label}
+              href={link.href}
+              className={cn(
+                "nav-link",
+                pathname === link.href && "active-nav-link",
+              )}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
         <ModeToggle />
       </nav>
     </header>