php, mysql, vanilla js로 자체게시판을 만들어보았습니다.

 AI의 도움을 받아 함수가 필요하면 그때 그때 만들고, 상수가 필요하면 그때 그때 만들었습니다.

앞에 만든함수와 뒤에 만든 함수가 서로 충돌하면 고치고, 페이지가 꼬이면 바로 잡고있습니다.

그래도 처음 로그인과 게시판을 만들었다는데 의미를 두고 싶습니다.

pc에서 햄버거버튼을 여러번 눌러야 메뉴가 열리는 버그가 있습니다. 

id: test  ,  pw: test 

아래코드가 햄버거 버튼을 누르면 메뉴가 나오는 코드입니다. pc에서는 몇번을 클릭해야 열리는데 왜그런지 고수님의 조언을 구합니다

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
?>
<nav class="navigation" aria-label="주 메뉴">
<a href="<?= BASE_URL ?>/index.php" class="logo glow" aria-label="홈으로 이동"> Open Web Service </a>       
  <div class="header-right">
    <?php if (isset($_SESSION['mb_name'])): ?>
      <span class="username"><?= escapeHtml($_SESSION['mb_name']) ?>님</span>
    <?php else: ?>
      <a href="<?= BASE_URL ?>/member/login.php">로그인</a>
    <?php endif; ?>
  </div> 
<button type="button" class="menu-toggle"> <span class="hamburger-icon" >☰</span>  </button>
</nav>
<div id="myNav" class="overlay" style="height: 0%; transition: height 0.3s ease;">
  <a class="closebtn" onclick="closeNav()">×</a>
  <div class="overlay-content">
    <a href="<?= BASE_URL ?>/member/logout.php">로그아웃</a>
    <a href="https://ows.kr/content/web_dev.php">웹사이트 개발</a> 
    <a href="https://ows.kr/board/board_gallery/list.php"><i class="fa fa-list-alt"></i> 자유게시판</a>
    <a href="https://ows.kr/board/board_youtube/list.php"><i class="fa fa-list-alt"></i> 유튜브게시판</a>
    <?php if ($mbLevel === 10): ?>
      <a href="https://ows.kr/mail/view_mail.php">메일확인</a>
    <?php endif; ?>
  </div>
</div>
<script>
function openNav() {
  document.getElementById('myNav').style.height = '100%';
}

function closeNav() {
  document.getElementById('myNav').style.height = '0%';
}

document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('.menu-toggle');
  const myNav = document.getElementById('myNav');
  
  menuToggle.addEventListener('click', function() {
    if (myNav.style.height === '100%') {
      closeNav();
    } else {
      openNav();
    }
  });
});
</script>

감사합니다.