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='absolute ml-[-20px] top-16 w-full bg-[#1B1130]'>
 			<div className='flex flex-col p-5 pb-8 w-full'>
@@ -16,13 +28,13 @@ const NavDrop = forwardRef((props, ref)=> {
 							<div
 								className='min-h-[50px] cursor-pointer'
 								onClick={() =>
-									show === link.title ? setShow(null) : setShow(link.title)
+									show === link.title ? setShow(null): setShow(link.title)
 								}
 							>
 								{link.subMenu ? (
 									<div>
 										<div className='flex items-center justify-between'>
-											<div className='text-white'>{link.title}</div>
+                                    <div className={`hover:text-cyan-400 ${active===link.title.toLowerCase() ? 'text-cyan-400': 'text-white'}`}>{link.title}</div>
 											<Dropdown
 												className={`transition-transform duration-700 ${
 													show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
@@ -34,8 +46,8 @@ const NavDrop = forwardRef((props, ref)=> {
 												{link.subMenu.map((sub) => (
 													<Link href={sub.ref} key={sub.ref}>
 														<div
-															onClick={() => setDrop(false)}
-															className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer'
+                                                    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>
@@ -45,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>
 								)}
@@ -59,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 */
-}
+}