The fixed component is the dropdown menu which have fixed class and z index of 50.
Currently, it has white background and I want to change it so it has same backgound as the body. Why I don't use transparent backgound? because it will show the content below.
note: the backgound of the body is linear gradient

botnav

<div id="botnav" className={`${isOpen ? 'h-40' : 'h-0'}
                px-10
                md:hidden
                flex flex-col justify-center 
                transition-all duration-300 ease
                fixed
                bg-white
                 z-50
                w-full
                `}>
            {
                menu.map((item, index) => {
                    return (
                        <Link href={item.link} key={index} className="">
                            <a onClick={toogleMenu} className={`${router.pathname == item.alias ? 'text-black font-bold' : 'text-grey'} overflow-hidden transition-none sm:text-primary w-full py-1 text-black font-bold items-center justify-center border-none `}>
                                {item.name}
                            </a>
                        </Link>
                    )
                })
            }

        </div>

body

the body is a regullar body tag and I set the bg with use effect

  useEffect(() => {
    const bodybg = {
      '/': 'bg-grad-lblue',
      '/diary': 'bg-grad-lred',
      '/askme': 'bg-grad-lyellow',
      '/contact': 'bg-grad-leftblue'
    }
    document.body.className = bodybg[router.pathname]
  }, [router.pathname])

background class

  .bg-grad-lred {
background: linear-gradient(302.02deg, #FFB1B5 -43.05%, #FFFFFF 75.37%);
  }

  .bg-grad-lblue{
    background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
  }

  .bg-grad-lyellow{
    background: linear-gradient(127.05deg, #FFD085 -4.39%, #FFFFFF 73.98%);
  }
  .bg-grad-leftblue{
    background: linear-gradient(77.58deg, #D4E7FE 1.34%, #FFFFFF 100%);
  }