feat: blured nav dropdown with dynamic navbar

asyncapi · Nov 24, 2024 · 4f53ac3 · 4f53ac3
1 parent 7e49dd8
commit 4f53ac3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git 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
@@ -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>
 							)}