diff --git a/components/Navbar/navDrop.js b/components/Navbar/navDrop.js index 443af86c..d1fc67a1 100644 --- a/components/Navbar/navDrop.js +++ b/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 (
@@ -22,19 +34,20 @@ const NavDrop = forwardRef((props, ref)=> { > {link.subMenu ? (
-
-
{link.title}
+
+
{link.title}
-
+
{show && show === link.title && (
{link.subMenu.map((sub) => ( - -
setDrop(false)} - className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer' + +
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}
@@ -44,7 +57,7 @@ const NavDrop = forwardRef((props, ref)=> { )}
) : ( -
setDrop(false)}> +
setDrop(false)}> {link.title}
)} @@ -58,4 +71,4 @@ const NavDrop = forwardRef((props, ref)=> { }) NavDrop.displayName = 'NavDrop'; -export default NavDrop; \ No newline at end of file +export default NavDrop; diff --git a/styles/globals.css b/styles/globals.css index 4b9c83b3..d02afef8 100644 --- a/styles/globals.css +++ b/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 */ -} \ No newline at end of file +}