-1

I wrote Javascript to create a toggle button from an image to pop out a full-screen navigation bar.

Javascript

const menuHamburger = document.querySelector(".menu-hamburger")
const navLinks = document.querySelector(".nav-links")

     menuHamburger.addEventListener('click',()=>{
     navLinks.classList.toggle('mobile-menu')
     })

This was placed in after all the imports of the react main app.js file

What this does is it removes the margin left:-100% that was set in the nav links (vertical navigation bar) to make it appear by adding a class of margin:0 in media queries.

This is the navigation bar css.


.mobile-menu{
margin:0
}

@media screen and (max-width: 900px){

     .mobile-menu{
      margin-left:0;
     }
.nav-links{
  position:absolute;               /*Applied  to Li elements.*/
  background-color:rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  width:100%;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  display:flex;
  margin-left:-100%;
  transition: all 0.5s ease;
  height:100vh;

}

Media Queries

Though it works when I reload the page it removes all the elements in the body.

Also the blurry vertical navigation bar is supposed to blur all the elements however some text are very clear. If this is not enough Code Sandbox.

Adding on, the code shows no errors though everything is missing.

I expect to have a blurry navigation bar that blurs all the elements.

I tried removing the Javascript from the website and it was full functional but when I put it back it disappears.

Brian
  • 99
  • 8

2 Answers2

1

The index.js file that inserts all the React code into the ID 'root' is missing

That should look something like this

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>)
Sethubharathi B
  • 44
  • 6
1

The first issue is that you are missing index.js file, so create it with the following configuration

import App from "./App";
import ReactDOM from "react-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Second, using querySelector() is not a good practice in react, however, you can easily do that, read more. It is showing an error because the query selector is trying to access the value before it is rendered, you may use useEffect() to tackle this.

geeky01adarsh
  • 312
  • 3
  • 14