Function to Open and Close the Overlay using single button element

Question

I would like to open and close overlay using single button, so when the button is clicked an additional class is added, when closed the class is removed and overlay is closed. So far I wrote the code that opens overlay and add/remove the class to the button. Also I've created the method to close the overlay but I'm struggling to create a proper event to actually close it, so I would be happy if anyone can guide me a bit.

I think there should be an 'if' statement within the events() checking if the button have added class, if so, the overlay will be closed using this function element.classList.contains("active");

Also the button is animated, so when class is added 3 bars (hamburger icon) becomes X and this is the main reason I don't want to have separate buttons to open and close, I already achieved that but this is not what I'm looking for.

class OverlayNav {
    constructor() {
        this.injectHTML()  
        this.hamburgerIcon = document.querySelector(".menu-icon")
        this.events()
    }


    events() {
        this.hamburgerIcon.addEventListener("click", () => this.overlayOpen())
    }


    overlayOpen() {
        document.getElementById("myNav").style.width = "100%";
        this.hamburgerIcon.classList.toggle("menu-icon--close-x")
    }
    overlayClose() {
        document.getElementById("myNav").style.width = "0%";
    }


    injectHTML() {
        document.body.insertAdjacentHTML('beforeend', `
            <div id="myNav" class="overlay">
                <p>My Overlay</p>
            </div>
        `)
    }
}

export default OverlayNav  

Answer 1

You can make a function with a if statement handle Opening and closing the overlay

Here is your code edited

class OverlayNav {
  constructor() {
    this.injectHTML();
    this.hamburgerIcon = document.querySelector(".menu-icon");
    this.events();
  }

  events() {
    this.hamburgerIcon.addEventListener("click", () => this.overlayHandle());
  }

  overlayOpen() {
    document.getElementById("myNav").style.width = "100%";
    this.hamburgerIcon.classList.toggle("menu-icon--close-x");
  }
  overlayClose() {
    document.getElementById("myNav").style.width = "0%";
  }
  overlayHandle() {
    if (element.classList.contains("active")) {
      this.overlayClose();
    } else {
      this.overlayOpen();
    }
  }

  injectHTML() {
    document.body.insertAdjacentHTML(
      "beforeend",
      `
          <div id="myNav" class="overlay">
              <p>My Overlay</p>
          </div>
      `
    );
  }
}

export default OverlayNav;

Answer 2

You can add a property that keeps track of the state of the nav bar.

constructor() {
  this.injectHTML()  
  this.hamburgerIcon = document.querySelector(".menu-icon")
  this.events()
  this.overlayVisible=true;
}

Then add a method that toggles the state and calls the right open/close-method:

toggleOverlay() {
  if (this.overlayVisible)
    this.overlayOpen();
  else
    this.overlayClose();
  this.overlayVisible=!this.overlayVisible;
  
}

Finally make the events method call toggleOverlay() instead of overlayOpen().

events() {
  this.hamburgerIcon.addEventListener("click", () => this.toggleOverlay())
}

Answer 3

Alternativly, a pure HTML + CSS solution, using only the details element and the [open] CSS attribute selector.

.overlay > p {
    padding: 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 25vw
}
.overlay summary {
    padding: 1rem 0.5rem;
    cursor: pointer;
    max-height: 90vh;
    overflow: auto;
    font-size: 4em;
    list-style: none;
}
.overlay[open] summary {
    background: black;
    color: white;
    padding: 0.5rem;
    font-size: 1em;
}

.overlay[open] {
    position: fixed;
    /* top: calc(50% - 25vw); */
    left: calc(50% - 15vw);
    outline: 5000px #00000090 solid;
    border: 5px red solid;
    border-radius: 0.5rem;
    font-size: 1em
}

.overlay[open] summary::after {
    content: '?';
    float: right;
}

<details class="overlay">
  <summary>?</summary>
    <p>
      Hello world!
    </p>
</details>