<header>
  <div class="logo">
    <a href="#"><img src="https://i0.wp.com/justonequilt.com/wp-content/uploads/2018/04/demo-logo-white.png" alt="Logo"></a>  
    <h1>Your Brand</h1>
  </div>
  <button class="menu-btn">
    <span></span>
    <span></span>
    <span></span>
  </button>
</header>

<nav class="menu" id="fullscreenMenu" role="dialog">
  <button class="close-btn">&times;</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main class="demo-content">
  <h2>Welcome to Our Website</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Nullam vel ipsum nec mi tincidunt interdum eget at eros.</p>
  <p>Pellentesque eu odio ac velit tincidunt eleifend eu eu dui.</p>
  <p>Sed eget purus eu purus lacinia vestibulum in a turpis.</p>
  <p>Phasellus vel tristique erat. In sit amet sapien a ligula dignissim pellentesque.</p>
  <a href="#">Learn More</a>
</main>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  width: auto; /* Adjust the size of the logo image as needed */
  height: 40px;
  margin-right: 10px;
}
.menu-btn {
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.menu-btn span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px;
  background-color: #fff;
}
.menu-btn.active span {
  background-color: #333;
}
.menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  padding: 20px;
  z-index: 999;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.menu li {
  margin: 15px 0;
}
.menu li a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
}

.menu.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  padding: 20px;
  z-index: 999;
}
.menu.active ul {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu.active li {
  margin: 15px 0;
}
.menu.active li a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  text-align: center;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  background: transparent;
  border: 0;
}
.demo-content {
  padding: 20px;
  text-align: center;
}
.demo-content h2 {
  margin-bottom: 20px;
}
.demo-content p {
  margin-bottom: 10px;
}

// Get the menu button element
const menuBtn = document.querySelector(".menu-btn");

// Get the close menu button element
const closeMenuBtn = document.querySelector(".close-btn");

// Get the fullscreen menu element
const fullscreenMenu = document.getElementById("fullscreenMenu");

// Function to toggle the menu
function toggleMenu() {
  fullscreenMenu.classList.toggle("active");
  menuBtn.classList.toggle("active");
}

// Add event listener to the menu button for the 'click' event
menuBtn.addEventListener("click", toggleMenu);
closeMenuBtn.addEventListener("click", toggleMenu);

// Add event listener to the 'keydown' event on the document
document.addEventListener("keydown", function (e) {
  const target = e.target;
  const shiftPressed = e.shiftKey;

  // If TAB key pressed
  if (e.keyCode === 9) {
    // If inside a fullscreen menu (determined by attribute role="dialog")
    if (target.closest('[role="dialog"]')) {
      // Find the first or the last input element in the dialog parent (depending on whether Shift was pressed).
      // Get the focusable elements (links and buttons)
      let focusElements = target
        .closest('[role="dialog"]')
        .querySelectorAll("a[href], button");
      let borderElem = shiftPressed
        ? focusElements[0]
        : focusElements[focusElements.length - 1];

      if (borderElem) {
        // If the current target element is the first or last focusable element in the dialog, prevent the default behaviour.
        if (target === borderElem) {
          e.preventDefault();

          // move focus to the first element when the last one is reached and vice versa
          borderElem === focusElements[0]
            ? focusElements[focusElements.length - 1].focus()
            : focusElements[0].focus();
        }
      }
    }
  }
});