From e2830bd522ac568549479a1c3fbc9afb29834efa Mon Sep 17 00:00:00 2001
From: Karan-Semwal <kar9205an@gmail.com>
Date: Sun, 21 Jul 2024 14:35:30 +0530
Subject: [PATCH] Added styling foor active nav element

---
 src/components/shared/Header.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
index b60452a..b0e4d5b 100644
--- a/src/components/shared/Header.tsx
+++ b/src/components/shared/Header.tsx
@@ -7,12 +7,14 @@ import ThemeTogglebutton from "../ui/ThemeToggle";
 import { useState } from "react";
 import NavLink from "./NavLink";
 import { title } from "process";
+import { usePathname } from "next/navigation";
 
 const Header = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const handleMenuOpen = () => {
     setMenuOpen(!menuOpen);
   };
+  const pathname = usePathname();
   const links = [
     {
       title: "Home",
@@ -62,7 +64,9 @@ const Header = () => {
                     {links.map((link, index) => (
                       <Link
                         key={index}
-                        className="transition text-foreground hover:text-foreground/75"
+                        className={`transition ${
+                          pathname === link.path ? 'text-primary font-bold' : 'text-foreground hover:text-foreground/75'
+                        }`}
                         href={link.path}
                       >
                         {link.title}