When I click my Hamburger icon it wont display the div content

I am developing a mobile app with Apache Cordova. I copied a responsive Nav Menu for my App and copied the exact same code as shown in the video but when I click the hamburger icon on my Android emulator it wont display the menu. Anyone can help me?

Here is all my code:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  // Cordova is now initialized. Have fun!

  console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
  document.getElementById('deviceready').classList.add('ready');

}

function toggleMobileMenu(menu) {
  menu.classList.toggle('open');

}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #353836;
  color: white;
  font-family: "Poppins", sans-serif;
}

header a {
  text-decoration: none;
}

header {
  padding: 0 20px;
  background-color: #1d1f1d;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

#brand a {
  color: #09c372;
}

ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

ul a {
  color: white;
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
}

.mobile-menu li {
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
  header nav {
    display: none;
  }
  #hamburger-icon {
    display: block;
  }
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="css/index.css">
  <title>Hello World</title>
</head>

<body>
  <header>
    <div id="brand"><a href="/">ApacheCordova</a></div>
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
        <li id="login"><a href="/login">Login</a></li>
        <li id="signup"><a href="/signup">Signup</a></li>
      </ul>
    </nav>
    <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <ul class="mobile-menu">
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </div>
  </header>
  <script src="cordova.js"></script>
  <script src="js/index.js"></script>
</body>

</html>

When I click it, it wont show anything

I would really appreciate the help

Solution

this meta tag that you used, doesn't let your inline-event-handlers and styles work correctly:

<meta http-equiv="Content-Security-Policy"
    content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

you can delete this meta-tag or change the value that you set on it and it will work. here is some related issue: Content Security Policy “Refused to execute inline event handler” error

if you don't want to change your meta tag, you can also use eventListener for toggleMobileMenu on your hamburger-icon like this:

const menu=document.getElementById("hamburger-icon");
if(menu)  menu.addEventListener("click", toggleMobileMenu);
        
                
function toggleMobileMenu() {
   if(menu) menu.classList.toggle("open");
 }