embroidery-viewer/src/lib/components/Header.svelte

<script>
  import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
  import logo from '$lib/assets/logo.webp';
  import MediaQuery from './MediaQuery.svelte';

  /**
   *
   * Returns logo image configuration based on the screen size match.
   *
   * @param {boolean} matches - The event that triggered the language switch.
   */
  const configsFor = (matches) => {
    return matches
      ? { src: logo, width: 150, height: 70 } // mobile
      : { src: logo, width: 150, height: 100 }; // desktop
  };

  /**
   * Switches the current locale to the opposite language (EN_US <-> PT_BR).
   * Prevents the default link behavior (e.g., page jump).
   *
   * @param {MouseEvent | KeyboardEvent} e - The event that triggered the language switch.
   */
  const onSwitchToOppositeLang = (e) => {
    e.preventDefault();
    $locale =
      $locale === SUPPORTED_LOCALES.EN_US
        ? SUPPORTED_LOCALES.PT_BR
        : SUPPORTED_LOCALES.EN_US;
  };

  let isMenuOpen = false;
</script>

<header>
  <div class="logo">
    <MediaQuery query="(max-width: 768px)" let:matches>
      {@const configs = configsFor(matches)}
      <a href="/">
        <img
          src={configs.src}
          alt="Embroidery viewer logo"
          width={configs.width}
          height={configs.height}
        />
      </a>
    </MediaQuery>
  </div>

  <div class="nav-container">
    <MediaQuery query="(max-width: 768px)" let:matches>
      <slot let-matches>
        {#if matches}
          <button class="hamburger" onclick={() => (isMenuOpen = !isMenuOpen)}>
            {#if isMenuOpen}x{:else}☰{/if}
          </button>
        {/if}
      </slot>
    </MediaQuery>
    <nav class:is-open={isMenuOpen}>
      <ul>
        <li>
          <a href="/">{$t('header.homeNav')}</a>
        </li>
        <li>
          <a href="/viewer">{$t('header.viewerNav')}</a>
        </li>
        <li>
          <a href="/about">{$t('header.aboutNav')}</a>
        </li>
        <li>
          <a href="/donate">{$t('header.donateNav')}</a>
        </li>
      </ul>
    </nav>

    <button
      type="button"
      class="common-switch {$locale === SUPPORTED_LOCALES.EN_US
        ? 'portuguese-switch'
        : 'english-switch'}"
      onclick={onSwitchToOppositeLang}
      onkeydown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          onSwitchToOppositeLang(e);
        }
      }}
    >
      <div style="display: flex; width: fit-content;">
        <span style="font-size: 20px;">{$t('header.languageSwitch')}</span>
      </div>
    </button>
  </div>
</header>

<style>
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 100px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    width: 100%;
  }

  .logo img {
    height: auto;
    max-height: 60px;
  }

  .logo a {
    border-bottom: none;
  }

  .logo a:hover {
    background: transparent;
  }

  .nav-container {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
  }

  nav ul li {
    display: flex;
    font-weight: bold;
  }

  .hamburger {
    background: none;
    border: none;
    font-size: 35px;
    width: 35px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: none;
  }

  .common-switch {
    border: none;
    background-color: unset;
    width: fit-content;
    cursor: pointer;
  }

  .portuguese-switch {
    color: #0c8f27;
    border-bottom: 3px solid #0c8f27 !important;
    fill: #0c8f27 !important;
  }

  .portuguese-switch:hover {
    background: #0c8f27;
    color: #ffffff;
    fill: #ffffff !important;
  }

  .english-switch {
    color: #be0a2f;
    border-bottom: 3px solid #be0a2f;
    width: fit-content;
    fill: #be0a2f !important;
  }

  .english-switch:hover {
    background: #be0a2f;
    color: #ffffff;
    fill: #ffffff !important;
  }

  @media (max-width: 768px) {
    header {
      padding: 10px 20px;
    }
    .hamburger {
      display: block;
      width: 35px;
    }

    nav {
      display: none;
      flex-direction: column;
      gap: 10px;
      background-color: #f8f9fa;
      position: absolute;
      top: 60px;
      right: 0;
      border: 1px solid #ddd;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    nav.is-open {
      display: inline-block;
      margin-top: 25px;
      width: 100%;
    }

    nav ul {
      flex-direction: column;
      gap: 0px;
      width: 100%;
    }

    nav ul li {
      text-align: center;
      width: 100%;
    }

    nav ul li a {
      display: inline-block;
      width: 100%;
      padding: 10px;
      border-bottom: none;
    }
  }
</style>