artsite/views/v2/header.ejs

<header id="main-header">
  <div class="header-container">
    <div class="nav-logo">
      <a href="/"><img src="/assets/icon/logo3.webp" id="logo-img" class="logo" alt="Art Number Coloring Logo"></a>
      <!-- <span>Art Number Coloring</span> -->
    </div>
    <button class="menu-btn" id="menuBtn">☰</button>

    <nav class="nav-menu">
      <li class="dropdown-menu">
        <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>" style="padding: 30px 0 30px 0">COLORING PAGES
          <span><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1" x="0px" y="0px" width="15px" height="10px" viewBox="57 35.171 26 16.043"
              enable-background="new 57 35.171 26 16.043" xml:space="preserve">
              <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z"></path>
            </svg></span>
        </a>
        <div class="dropdown-menu-btn">
          <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">Collections</a>
          <a href="/coloring-page-albums" class="<%= uri.includes(`/coloring-page-albums`) ? 'active' : '' %>">Albums</a>
          <!-- <a href="#">ANIMALs</a>
          <a href="#">HOLIDAYS</a> -->
        </div>
      </li>
      <li><a href="/coloring-page-gallery" class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
      <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
      <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
      <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>
    </nav>
  </div>

  <div class="mobile-menu" id="mobileMenu">
    <ul>
      <li><a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">COLORING PAGES</a></li>
      <li><a href="/coloring-page-gallery" class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
      <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
      <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
      <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>
    </ul>
  </div>
</header>

<script>
  // 移动端菜单切换逻辑
  const menuBtn = document.getElementById('menuBtn');
  const mobileMenu = document.getElementById('mobileMenu');

  menuBtn.addEventListener('click', () => {
    mobileMenu.style.display = mobileMenu.style.display === 'block' ? 'none' : 'block';
  });
</script>