css - Is there a way to hide an element from another react component?

Question

I'm fairly new to react and css and I'm a bit stuck. I have an animated NavBar that opens on a button click and fills the page - however, because of the way my app is structured I'm struggling to hide the component underneath the nav - i.e. home page, as elements with properties like position: absolute aren't being hidden underneath it.

Right now, my css classes for this are:

.nav-links.open {
    clip-path: circle(1400px at 95% -10%);
    -webkit-clip-path: circle(1400px at 95% -10%);
    opacity: 1;
  }

  .nav-links.close {
    clip-path: circle(100px at 95% -10%);
    -webkit-clip-path: circle(100px at 95% -10%);
    opacity: 0.7;
  }

And I simply toggle the classes with this:

toggleNavbar() {
    if (this.state.navBarActive === false) {
      this.setState({
        navBackStyle: 'white',
        navClass: 'nav-links open',
        navBarActive: !this.state.navBarActive,
      });
    } else {
      this.setState({
        navBackStyle: '#5b78c7',
        navClass: 'nav-links close',
        navBarActive: !this.state.navBarActive,
      });
    }
  }

My react components are all in the app.js, with a components folder containing the navbar, home etc.

My css files are also structured as components and imported with scss. I understand I could have everything in one file to make it easier to hide other elements but that won't be very easy to work with, as this is big project.

question from:https://stackoverflow.com/questions/66061617/is-there-a-way-to-hide-an-element-from-another-react-component

Answer 1

Waitting for answers