From 4f53ac31562018aac959476c6388f5786c9f4196 Mon Sep 17 00:00:00 2001
From: r3yc0n1c <raja.majumdar.01@gmail.com>
Date: Mon, 25 Nov 2024 02:06:06 +0530
Subject: [PATCH] feat: blured nav dropdown with dynamic navbar

---
 components/Navbar/navDrop.js | 9 +++------
 components/Navbar/navbar.js  | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/Navbar/navDrop.js b/components/Navbar/navDrop.js
index a3f489cc..443af86c 100644
--- a/components/Navbar/navDrop.js
+++ b/components/Navbar/navDrop.js
@@ -8,7 +8,7 @@ const NavDrop = forwardRef((props, ref)=> {
 	const {setDrop}=props;
     const [show, setShow] = useState(null);
   return (
-		<div  ref ={ref} className='absolute ml-[-20px] top-16 w-full bg-[#1B1130]'>
+		<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'>
 				{links.map((link) => {
 					return (
@@ -22,13 +22,10 @@ const NavDrop = forwardRef((props, ref)=> {
 							>
 								{link.subMenu ? (
 									<div>
-										<div className='flex items-center justify-between' 
-										>
+										<div className='flex'>
 											<div className='text-white'>{link.title}</div>
 											<Dropdown
-												className={`transition-transform duration-700 ${
-													show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
-												}`}
+												className={`transition-transform duration-700`}
 											/>
 										</div>
 										{show && show === link.title && (
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
index 58af7fef..242ac080 100644
--- a/components/Navbar/navbar.js
+++ b/components/Navbar/navbar.js
@@ -69,7 +69,7 @@ function Navbar() {
 	};
 
 	return (
-		<div className='flex justify-center items-center fixed w-full backdrop-blur top-0 z-[99] text-white'>
+		<div className={`flex justify-center items-center fixed w-full backdrop-blur ${ drop && 'bg-[#1B1130]/90'} top-0 z-[99] text-white`}>
 			<div className='w-[1131px]'>
 				<div className='p-5 flex justify-between h-[75px] w-full items-center'>
 					<div className='flex items-center sm:justify-between sm:w-full' data-test="nav-Home">
@@ -86,7 +86,7 @@ function Navbar() {
 									<Cancel />
 								</button>
 							) : (
-								<button >
+								<button>
 									<Hamburger ref={svg} />
 								</button>
 							)}