feat: change navdrop links and sub-links style on hover

components/Navbar/navDrop.js

@@ -1,12 +1,24 @@
-import React,{useState,forwardRef} from 'react';
+import React,{useState,forwardRef, useEffect} from 'react';
 import links from '../../config/links.json';
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
 
 
 const NavDrop = forwardRef((props, ref)=> {
-	const {setDrop}=props;
-    const [show, setShow] = useState(null);
+  const {setDrop}=props;
+  const [show, setShow] = useState(null);
+  const [active, setActive] = useState(null);
+  const [activeSubMenu, setActiveSubMenu] = useState(null);
+
+  const currentUrl  = window.location.href
+  let currentMenu = currentUrl.split('/')[(currentUrl.split('/')).length - 2]
+  let currentSubMenu = "/" + currentMenu + '/' + currentUrl.split('/')[(currentUrl.split('/')).length - 1]
+
+  useEffect(() => { 
+    setActive(currentMenu) 
+    setActiveSubMenu(currentSubMenu) 
+  }, [currentUrl])
+
   return (
 		<div  ref ={ref} className='z-[99] absolute left-0 top-[74px] w-full h-screen bg-[#1B1130]/90 backdrop-filter backdrop-blur-md'>
 			<div className='flex flex-col p-5 pb-8 w-full'>
@@ -22,19 +34,20 @@ const NavDrop = forwardRef((props, ref)=> {
 							>
 								{link.subMenu ? (
 									<div>
-										<div className='flex'>
-											<div className='text-white'>{link.title}</div>
+                   <div className='flex items-center justify-between'>
+                     <div className={`hover:text-cyan-400 ${active===link.title.toLowerCase() ? 'text-cyan-400': 'text-white'}`}>{link.title}</div>
 											<Dropdown
 												className={`transition-transform duration-700`}
 											/>
-										</div>
+										 </div>
 										{show && show === link.title && (
 											<div className='flex flex-col py-6 w-full'>
 												{link.subMenu.map((sub) => (
-													<Link href={sub.ref} key={sub.ref} >
-														<div data-test={`nav-sub-${sub.title}`}
-															onClick={() => setDrop(false)}
-															className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer'
+													<Link href={sub.ref} key={sub.ref}>
+														<div
+                                                            data-test={`nav-sub-${sub.title}`}
+                                                            onClick={() => setDrop(false)}
+                                                            className={`h-[40px] flex ${activeSubMenu === sub.ref + "#"? 'navbg-fixed' : 'navbg'} transition duration-150 ease-out items-center p-6 cursor-pointer`}
 														>
 															{sub.title}
 														</div>
@@ -44,7 +57,7 @@ const NavDrop = forwardRef((props, ref)=> {
 										)}
 									</div>
 								) : (
-									<div className='text-white' onClick={() => setDrop(false)}>
+                                    <div className='text-white hover:text-cyan-400' onClick={() => setDrop(false)}>
 										{link.title}
 									</div>
 								)}
@@ -58,4 +71,4 @@ const NavDrop = forwardRef((props, ref)=> {
 })
 NavDrop.displayName = 'NavDrop';
 
-export default NavDrop;
+export default NavDrop;

styles/globals.css

@@ -88,8 +88,17 @@ body {
 .transparent-bg{
   @apply w-56 h-48 rounded gradient-bg absolute bottom-0 left-0 translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0
 }
+
+.navbg-fixed {
+    background: linear-gradient(225deg, #AD20E2 9.35%, #2DCCFD 88.41%);
+    border-radius: 15px;
+    color: black;
+}
+
 .navbg:hover, .navbg:focus{
     background: linear-gradient(225deg, #AD20E2 9.35%, #2DCCFD 88.41%);
+    border-radius: 15px;
+    color: black;
 }
 
 .kinda-dark{
@@ -225,4 +234,4 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
-}
+}