From fad753e60e8120eaee7432ade86eb6e20f852b53 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 1 Oct 2024 13:26:21 +0530
Subject: [PATCH] navbar update

---
 src/components/NavBar/NavBar.jsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index bb68483..a3123dc 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -10,7 +10,7 @@ import {
   useColorMode,
   VStack,
 } from "@chakra-ui/react";
-import { Outlet, Link, useLocation } from "react-router-dom";
+import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
 import logo from "../../assets/images/rubix.png";
 import logoLight from "../../assets/images/light-logo.png";
 import { useEffect, useState } from "react";
@@ -72,18 +72,26 @@ const NavBar = () => {
             </Link>
 
             <Box display={"flex"} alignItems={"center"} gap={7}>
-              <Link
+              <NavLink
                 to="/mainNet"
-                style={{ fontSize: "14px", fontWeight: "400" }}
+                style={({ isActive }) => ({
+                  fontSize: "14px",
+                  fontWeight: "400",
+                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
+                })}
               >
                 MAIN NET
-              </Link>
-              <Link
+              </NavLink>
+              <NavLink
                 to="/subnet"
-                style={{ fontSize: "14px", fontWeight: "400" }}
+                style={({ isActive }) => ({
+                  fontSize: "14px",
+                  fontWeight: "400",
+                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
+                })}
               >
                 SUBNETS
-              </Link>
+              </NavLink>
               <SwitchBtn
                 isSwitchOn={isSwitchOn}
                 setIsSwitchOn={setIsSwitchOn}