made hamburger menu and navbar sticky

components/Navbar/navDrop.js

@@ -1,62 +1,60 @@
-import React,{useState,forwardRef} from 'react';
-import links from '../../config/links.json';
+import React, { useState, forwardRef } from 'react';
+import links from '../../config/links.json'; // Your link data
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
 
+const NavDrop = forwardRef((props, ref) => {
+  const { setDrop } = props;
+  const [show, setShow] = useState(null); // Track which submenu is open
+
+  // Toggle the dropdown for a particular menu
+  const toggleDropdown = (linkTitle) => {
+    setShow(show === linkTitle ? null : linkTitle); // Toggle open/close
+  };
 
-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 className='flex flex-col p-5 pb-8 w-full'>
-				{links.map((link) => {
-					return (
-						<Link href={link.ref} key={link.title}>
-							<div
-								className='min-h-[50px] cursor-pointer'
-								onClick={() =>
-									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>
-											<Dropdown
-												className={`transition-transform duration-700 ${
-													show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
-												}`}
-											/>
-										</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
-															onClick={() => setDrop(false)}
-															className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer'
-														>
-															{sub.title}
-														</div>
-													</Link>
-												))}
-											</div>
-										)}
-									</div>
-								) : (
-									<div className='text-white' onClick={() => setDrop(false)}>
-										{link.title}
-									</div>
-								)}
-							</div>
-						</Link>
-					);
-				})}
-			</div>
-		</div>
-	);
-})
+    <div ref={ref} className="absolute ml-[-20px] top-16 w-full bg-[#1B1130]">
+      <div className="flex flex-col p-5 pb-8 w-full">
+        {links.map((link) => (
+          <Link href={link.ref} key={link.title}>
+            <div className="min-h-[50px] cursor-pointer">
+              <div
+                className="flex items-center justify-between"
+                onClick={() => toggleDropdown(link.title)}
+              >
+                <div className="text-white">{link.title}</div>
+                {link.subMenu && (
+                  <Dropdown
+                    className={`transition-transform duration-700 ${
+                      show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
+                    }`}
+                  />
+                )}
+              </div>
+
+              {/* Display submenu if it is open */}
+              {show === link.title && link.subMenu && (
+                <div className="flex flex-col py-6 w-full">
+                  {link.subMenu.map((sub) => (
+                    <Link href={sub.ref} key={sub.ref}>
+                      <div
+                        onClick={() => setDrop(false)} // Close the menu when a sub-link is clicked
+                        className="h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer"
+                      >
+                        {sub.title}
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+});
+
 NavDrop.displayName = 'NavDrop';
 
-export default NavDrop;
+export default NavDrop;

components/Navbar/navbar.js

@@ -69,7 +69,7 @@ function Navbar() {
 	};
 
 	return (
-		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
+		<div className="flex justify-center items-center fixed top-0 w-full z-[99] text-white bg-black shadow-lg">
 			<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'>
@@ -80,7 +80,7 @@ function Navbar() {
 						</Link>
 					</div>
 					{isTablet ? (
-						<div>
+						<div className='fixed left-[90%]'>
 							{drop ? (
 								<button>
 									<Cancel />