Html – Hamburger manue doens't work when clicked. navigation should slide into view when clicked

function showImage(imageSrc) {
  const modal = document.getElementById('modal');
  const modalImg = document.getElementById('modal-img');

  modalImg.src = imageSrc;
  modal.style.display = 'flex';
}

function hideImage() {
  const modal = document.getElementById('modal');
  modal.style.display = 'none';
}

function goToIndex() {
  window.location.href = 'index.html';
}


// JavaScript to prevent right-click
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});


function toggleMenu() {
  const nav = document.getElementById('main-nav');
  nav.classList.toggle('show');
}


document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('.menu-toggle');

  menuToggle.addEventListener('click', function() {
    toggleMenu();
  });
});

main {
  display: flex;
  flex-wrap: wrap;
}

body {
  text-align: center;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  /* Set background color to black */
  color: #fff;
  /* Set text color to white */
  height: calc(100vh - 60px);
  /* Subtract the height of the header (60px) */
}

.center {
  margin: 0 auto;
  width: 80%;
  text-align: center;
  /* You can adjust the width as needed */
}

.column {
  flex: 1;
  /* Allow columns to grow and shrink equally */
  box-sizing: border-box;
  padding: 10px;
}

.columns-container {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.content-container {
  margin: 0 auto;
  max-width: 300px;
  /* Adjust the max-width as needed */
}

h1.center {
  margin: 0 auto;
  width: fit-content;
}

.column p,
.column img {
  margin-bottom: 10px;
  font-size: 20px;
  max-width: 100%;
  /* Ensure images don't exceed their container width */
}

.center-box {
  width: 95%;
  margin: 1% auto;
  padding: 10px;
  background-color: #000;
  /* Adjust background color as needed */
  text-align: left;
  /* Additional styles for the box */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Optional: Add a box shadow */
  border-radius: 8px;
  /* Optional: Add border radius for rounded corners */
  flex-basis: 80%;
  /* Adjust the width of each column as needed */
  overflow: hidden;
  /* or overflow: auto; */
  word-wrap: break-word;
  /* This property will wrap long words onto the next line */
  display: flex;
  flex-direction: column;
  /* Change to column layout */
  align-items: center;
  /* Center items horizontally */
  justify-content: center;
  /* Center items vertically */
}

.center-box .column {
  text-align: center;
}

.center-box img {
  display: block;
  margin: 0 auto 10px;
}

.thumbnail {
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

#modal-img {
  width: 80%;
  max-width: 800px;
  height: auto;
}

header {
  background-color: #333;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  /* Align items horizontally with space in between */
}

.branding {
  /* Adjust the styles based on your design preferences */
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  margin-left: 10px;
  /* Adjust margin as needed */
  text-decoration: none;
  /* Remove underlines from links */
}

.branding h1 {
  margin: 0;
  /* Remove default margin for the h1 element */
}

p {
  font-size: 27px;
  /* Adjust the value as needed */
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.line {
  height: 3px;
  width: 30px;
  background-color: #fff;
  margin: 6px 0;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.social-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 25px;
}


/* Style for paragraphs with extra space at the bottom */

.extra-space-bottom {
  margin-bottom: 20px;
  /* Adjust the value as needed */
}


/* Style for paragraphs with extra space at the top */

.extra-space-top {
  margin-top: 50px;
  /* Adjust the value as needed */
}

.prevent-select {
  user-select: none;
}


/* Initially hide the navigation menu off-screen */

nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}


/* Show the navigation menu when the 'show' class is present */

nav.show {
  transform: translateX(0);
}


/* Initially hide the navigation menu */

nav ul {
  display: none;
}


/* Show the navigation menu when the 'show' class is present */

nav.show ul {
  display: flex;
}

nav li {
  margin: 10px 0;
}

nav li.active a {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en" class="prevent-select">

<head>
  <title>Simple</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="assets/main.css" />
  <script src="assets/scripts.js"></script>
</head>

<body>
  <header>
    <!-- Branding on the left -->
    <div class="branding" onclick="goToIndex()" style="cursor: pointer;">
      <h1>Simple</h1>
    </div>
    <div class="menu-toggle" onclick="toggleMenu()">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <nav id="main-nav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main class="center-box">
    <!-- Your main content goes here -->
    <div>
    </div>
  </main>
</body>

</html>