We Keep Coding

How do I change the color of an element when a div is behind it?

I have a list with nested lists in my navbar, with a div that moves around the navbar according to the scroll position, something like this. I'm using React with Tailwind and Framer Motion to animate the position of the div behind everything. Something like this:
<header className="fixed top-8 left-0 right-0 z-10 my-0 mx-auto block w-full max-w-5xl px-4">
<nav className="m-auto flex h-14 w-full max-w-3xl items-center rounded-full bg-glass shadow-md backdrop-blur-xl">
<ul className="relative m-0 flex h-full w-full items-center justify-between gap-12 p-3">
<li
role="menuitem"
onClick={() => handleScrollIntoView(heroSection)}
onKeyUp={() => handleScrollIntoView(heroSection)}
className="z-20 shrink-0 pl-3 text-2xl font-medium text-babyPowder hover:cursor-pointer"
>
name
</li>
<li className="w-full shrink">
<ul className="relative flex h-full w-auto items-center gap-8 p-3 text-2xl font-normal text-babyPowder70">
<li
role="menuitem"
onClick={() => handleScrollIntoView(whoSection)}
onKeyUp={() => handleScrollIntoView(whoSection)}
className="z-20 shrink-0 transition-colors after:text-babyPowder after:bg-blend-difference hover:cursor-pointer hover:text-babyPowder"
>
who
</li>
<li
role="menuitem"
onClick={() => handleScrollIntoView(whatSection)}
onKeyUp={() => handleScrollIntoView(whatSection)}
className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
>
what
</li>
<li
role="menuitem"
onClick={() => handleScrollIntoView(howSection)}
onKeyUp={() => handleScrollIntoView(howSection)}
className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
>
how
</li>
<li
role="menuitem"
onClick={() => handleScrollIntoView(whySection)}
onKeyUp={() => handleScrollIntoView(whySection)}
className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
>
why
</li>
</ul>
</li>
<li className="shrink-0">
<ul className="mr-0 ml-auto flex gap-2 ">
<a
target="_blank"
href="mailto:example#example.com"
className="srhink-0 rounded-full bg-blueCrayola py-1 px-6 text-center text-2xl font-medium text-babyPowder hover:cursor-pointer hover:opacity-80"
rel="noreferrer"
>
talk
</a>
</ul>
</li>
</ul>
<motion.div
style={{
height: 'calc(100% - 1.1rem)',
width: springWidth, // framer motion value
left: springLeft, // framer motion value
}}
className="absolute rounded-full bg-eerieBlack"
/>
</nav>
</header>
Code Sandbox: https://codesandbox.io/s/change-color-based-on-if-div-is-behind-text-jk35r6
If I play around with the mix-blend-mode CSS property on the text, I can achieve the effect seen in the image below. However, I'm trying to make it so when the div is in front of, or behind, the text, that the text becomes white. And when the div isn't, the text remains grey. In other words, the opposite of what is seen in the image.
Any help is appreciated. Thanks!
PS: I looked around Stack Overflow, CSS Tricks and other resources, but couldn't find an example that achieves what I'm trying here. I found this article on CSS Tricks that gets close, but here the text elements have to be a child of the div, and in my case, that doesn't work. Apologies if there is a question out there that answers this.

Debugging Javascript (declarative) application)

I just read all there is about JavaScript devtools sources panel and am still wondering is that the most current support for debugging declarative code. I am very comfortable with most debugging the imperative code (any language) but do not know what to do with a code like this (a section form the Redwood tutorial)
const BlogLayout = ({ children }) => {
const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
return (
<>
<header className="relative flex justify-between items-center py-4 px-8 bg-blue-700 text-white">
<h1 className="text-5xl font-semibold tracking-tight">
<Link
className="text-blue-400 hover:text-blue-100 transition duration-100"
to={routes.home()}
>
Redwood Blog
</Link>
</h1>
<nav>
<ul className="relative flex items-center font-light">
<li>
<Link
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
to={routes.about()}
>
About
</Link>
</li>
<li>
<Link
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
to={routes.contact()}
>
Contact
</Link>
</li>
<li>
{isAuthenticated ? (
<div>
<button type="button" onClick={logOut} className="py-2 px-4">
Logout
</button>
</div>
) : (
<Link to={routes.login()} className="py-2 px-4">
Login
</Link>
)}
</li>
</ul>
{isAuthenticated && (
<div className="absolute bottom-1 right-0 mr-12 text-xs text-blue-300">
{currentUser.email}
</div>
)}
</nav>
</header>
<main className="max-w-4xl mx-auto p-12 bg-white shadow rounded-b">
{children}
</main>
</>
)
The Chrome debugger allows setting the breakpoints at selected places, but when I hit a breakpoint, I would like to view the function argument 'children' for example. The best I can get is

Close the mobile menu by clicking or tapping outside

The code is for mobile menu but when I open it, it stays open and won't close.
I want it to close by clicking the menu links and tapping outside.
I know I haven't even added in the code but I don't know how to add into it.
Can anyone help me with the code? Any help is appreciated!
Here is the code :
import { useState } from "react";
import { HiMenuAlt3, HiX } from "react-icons/hi";
export default function NavBar() {
const [navbar, setNavbar] = useState(false);
return (
<nav className="w-full bg-white shadow">
<div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<a href="javascript:void(0)">
<h2 className="text-2xl font-bold">LOGO</h2>
</a>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<HiX className="text-4xl" /> // Close icon
) : (
<HiMenuAlt3 className="text-4xl" /> // Open icon
)}
</button>
</div>
</div>
</div>
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="text-gray-600 hover:text-blue-600">
Home
</li>
<li className="text-gray-600 hover:text-blue-600">
Blog
</li>
<li className="text-gray-600 hover:text-blue-600">
About US
</li>
<li className="text-gray-600 hover:text-blue-600">
Contact US
</li>
</ul>
</div>
</div>
</div>
</nav>
);
}

You do have code to close it, setNavbar(false). What you need is a hooked called useOnClickOutside. https://usehooks.com/useOnClickOutside/
To use it,
function NavBar() {
const ref = useRef()
useOnClickOutside(ref, () => setNavbar(false));
return (
<nav ref={ref}>
...
</nav>
)
}

Toggle Button JavaScript Code Not Working in React JS

I just want to ask help with the comment section down below of the JavaScript Code. I want to work the toggle button / hamburger button but it does not work because addEventListener is not required for ReactJS. What code must be encoded? Thank you.
I am doing a Traversy Media Tutorial using Tailwind CSS. I want to use React as framework because of its composable component feature and efficiency to use.
import React from 'react';
import logo from '../images/logo.svg';
// const btn = document.getElementById('menu-btn')
// const nav = document.getElementById('menu')
// btn.addEventListener('click', () => {
// btn.classList.toggle('open')
// nav.classList.toggle('flex')
// nav.classList.toggle('hidden')
// })
const Navbar = () => {
return (
<div>
<nav className='relative container mx-auto p-6'>
{/* Flex Container */}
<div className='flex items-center justify-between'>
{/* Logo */}
<div className='pt-2'>
<img src={logo} alt='logo.svg'></img>
</div>
{/* Menu Items */}
<div className='hidden space-x-6 md:flex'>
<a href='/' className='hover:text-darkGrayishBlue'>
Pricing
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Product
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
About Us
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Careers
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Community
</a>
</div>
{/* Button */}
<div>
<a
href='/'
className='hidden p-3 px-6 pt-2 text-white bg-brightRed rounded-full baseline hover:bg-brightRedLight md:block'
>
Get Started
</a>
</div>
{/* Hambuger Icon */}
<button
id='menu-btn'
className='block hamburger md:hidden focus:outline-none'
>
<span className='hamburger-top'></span>
<span className='hamburger-middle'></span>
<span className='hamburger-bottom'></span>
</button>
</div>
{/* Mobile Menu */}
<div className='md:hidden'>
<div
id='menu'
className='absolute flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md'
>
<a href='/'>Pricing</a>
<a href='/'>Product</a>
<a href='/'>About</a>
<a href='/'>Careers</a>
<a href='/'>Community</a>
</div>
</div>
</nav>
</div>
);
};
export default Navbar;

What you could do is define an open state and a click listener for the button.
Then change the class of the objects based on the open flag:
import React from 'react';
import logo from '../images/logo.svg';
const Navbar = () => {
const [open, setOpen] = useState(false);
const handleMenuClick = () => {
setOpen((prev) => !prev);
};
return (
<div>
<nav className='relative container mx-auto p-6'>
{/* Flex Container */}
<div className='flex items-center justify-between'>
{/* ... */}
{/* Hambuger Icon */}
<button
id='menu-btn'
className={`block hamburger md:hidden focus:outline-none ${
open && 'open'
}`}
onClick={() => handleMenuClick()}
>
<span className='hamburger-top'></span>
<span className='hamburger-middle'></span>
<span className='hamburger-bottom'></span>
</button>
</div>
{/* Mobile Menu */}
<div className='md:hidden'>
<div
id='menu'
className={`absolute flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md ${
open ? 'flex' : 'hidden'
}`}
>
<a href='/'>Pricing</a>
<a href='/'>Product</a>
<a href='/'>About</a>
<a href='/'>Careers</a>
<a href='/'>Community</a>
</div>
</div>
</nav>
</div>
);
};
export default Navbar;
```

You need to define the event handling where you define your button. In your case, it would look something like this:
<button
id='menu-btn'
className='block hamburger md:hidden focus:outline-none'
onClick={doAction}>
>
Official documentation regarding event handling in react.

How to show the correct image on hover

I have a list of projects, on one side I list their names, and on the other their image.
The images are in absolute position.
I want to change the Z-index of an image when I hover over the project name, how do I achieve it?
Here is the main Work Page:
<main className='w-full h-full text-gray-50 text-lg py-32'>
<div className='container flex content-center w-full h-full '>
<header className='px-12 flex flex-col justify-center'>
<h1 className='bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 text-8xl font-bold'>
Recent Work
</h1>
<ul className='mt-12 flex flex-col gap-4'>
{projectsData.map((project) => (
<WorkInfo key={project.id} project={project} />
))}
</ul>
</header>
<section className='px-12 flex-grow'>
<div className='max-w-xs w-full h-full'>
<ul className='relative w-full h-full'>
{projectsData.map((project, index) => (
<WorkImage
key={project.id}
project={project}
index={index}
isHover={isHover}
/>
))}
</ul>
</div>
</section>
</div>
</main>
Here is the WorkImage component, where I list the Images of the projects:
const WorkImage = ({ index, isHover, project }) => {
return (
<li className={`absolute w-full h-full`}>
<Image
src={project.image}
alt={project.title}
layout='fill'
blurDataURL
placeholder='blur'
className='w-full h-full object-cover'
/>
</li>
);
};
Here is the WorkInfo component, where I list the names of projects:
const WorkInfo = ({ project }) => {
return (
<li key={project.id} className='max-w-xs group'>
<a
href={project.url}
target='_blank'
rel='noopener noreferrer'
className='flex gap-1 items-center'>
<div className='h-px w-0 group-hover:w-full bg-gray-50 transition-all duration-700'></div>
<h3 className='whitespace-pre'>{project.title}</h3>
</a>
</li>
);
};