artsite/views/header.ejs

<link rel="stylesheet" href="/stylesheets/header.css">

<header class="header">
  <div class="dropdown">
    <svg class="dropbtn" style="margin-right: 5px;" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path opacity="0.5" d="M21 6L3 6" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M21 10L3 10" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M10 14H3" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M10 18H3" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path d="M14 15L17.5 18L21 15" stroke="#1C274C" stroke-width="2.5" stroke-linecap="round"
        stroke-linejoin="round" />
    </svg>
    <div class="dropdown-home-content">
      <a href="/<%= lang %>" class="<%= uri == `/${lang}` ? 'selected' : '' %>"><%= translate.homePage[lang] %></a>
      <a href="/<%= lang %>/category" class="<%= uri.includes(`/${lang}/category`) ? 'selected' : '' %>"><%= translate.categoryPage[lang] %></a>
      <a href="/<%= lang %>/tag" class="<%= uri.includes(`/${lang}/tag`) ? 'selected' : '' %>"><%= translate.tagPage[lang] %></a>
      <a href="/<%= lang %>/albums" class="<%= uri.includes(`/${lang}/albums`) ? 'selected' : '' %>"><%= translate.album[lang] %></a>
      <a href="/<%= lang %>/special" class="<%= uri.includes(`/${lang}/special`) ? 'selected' : '' %>"><%= translate.special[lang] %></a>
      <a href="/<%= lang %>/designers" class="<%= uri.includes(`/${lang}/designers`) ? 'selected' : '' %>"><%= translate.designerColumn[lang] %></a>
      <div class="divider"></div>
      <a href="/<%= lang %>/my-works"><%= translate.my[lang] %></a>
      <div class="divider"></div>
      <a href="/<%= lang %>/info#app" class="<%= uri.includes(`/${lang}/info#app`) ? 'selected' : '' %>"><%= translate.app[lang] %></a>
      <a href="/<%= lang %>/info#about" class="<%= uri.includes(`/${lang}/info#about`) ? 'selected' : '' %>"><%= translate.about[lang] %></a>
      <a href="/<%= lang %>/info#contact" class="<%= uri.includes(`/${lang}/info#contact`) ? 'selected' : '' %>"><%= translate.contactUs[lang] %></a>
      <div class="divider"></div>
      <p class="copyright">Copyright &copy; 2025 Art Number Coloring All Rights Reserved</p>
    </div>
  </div>

  <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Number Coloring"></a>

  <div class="search-container">
    <form action="/<%= lang %>/search" method="GET" class="search-box">
      <input type="text" name="search" placeholder="Search...">
      <button type="submit">
        <svg fill="#000000" width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z"
            fill-rule="evenodd" />
        </svg>
      </button>
    </form>
  </div>


  <div class="header-right">

    <div class="dropdown">
      <svg class="dropbtn" width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"
        aria-labelledby="languageIconTitle" stroke="#000000" stroke-width="1.5" stroke-linecap="round"
        stroke-linejoin="round" fill="none" color="#000000">
        <title id="languageIconTitle">Language</title>
        <circle cx="12" cy="12" r="10" />
        <path stroke-linecap="round"
          d="M12,22 C14.6666667,19.5757576 16,16.2424242 16,12 C16,7.75757576 14.6666667,4.42424242 12,2 C9.33333333,4.42424242 8,7.75757576 8,12 C8,16.2424242 9.33333333,19.5757576 12,22 Z" />
        <path stroke-linecap="round" d="M2.5 9L21.5 9M2.5 15L21.5 15" />
      </svg>
      <div class="dropdown-content">
        <% languages.forEach(lg=> { %>
          <a href="/<%= lg.code %>" class="<%= lg.code == lang ? 'selected' : '' %>" style="font-size: 16px"><%= lg.title %></a>
          <% }); %>
      </div>
    </div>

    <!-- <a href="/<%= lang %>/app" class="header-right-btn"><%= translate.app[lang] %></a>
    <a href="/<%= lang %>/my-works" class="header-right-btn"><%= translate.my[lang] %></a> -->
  </div>

</header>