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

<script>
  import MediaQuery from "../MediaQuery.svelte";
  import logo from "../../assets/logo.webp";
  import { t, locale, locales } from "../../i18n"
  import { path } from '../../utils/stores.js';
  import { routes } from '../../utils/routes.js';

  const configsFor = (matches) => {
    return matches
      ? { src: logo, width: 150, height: 70} // mobile
      : { src: logo, width: 150, height: 100 }; // desktop
  };

  const onSwitchToOppositeLang = () => {
    const oppositeLang = locales.find(item => item[0] !== $locale);
    locale.set(oppositeLang[0]);
  }

  const onNavigateTo = (e, route) => {
    e.preventDefault()
    history.pushState({}, '', route);
    path.set(route);
    if (isMenuOpen) {
      isMenuOpen = false
    }
  }

  let isMenuOpen = false;
</script>

<header>
  <div class="logo">
    <MediaQuery query="(max-width: 768px)" let:matches>
      {@const configs = configsFor(matches)}
          <a href="#" on:click={(e) => onNavigateTo(e, "/")}>
           <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" on:click={() => (isMenuOpen = !isMenuOpen)}>
          {#if isMenuOpen}x{:else}☰{/if}
        </button>
      {/if}
    </slot>
  </MediaQuery>
  <nav class:is-open={isMenuOpen}>
    <ul>
      {#each Object.entries(routes).filter(r => r[1].nameKey !== undefined) as [route, config]}
      <li><a href="#" on:click={(e) => onNavigateTo(e, route)} >{$t(config.nameKey)}</a></li>
      {/each}
    </ul>
  </nav>

  <a class="common-switch {$locale === 'en' ? 'portuguese-switch' : 'english-switch' }" href="#" on:click|preventDefault={onSwitchToOppositeLang}>
    <div style="display: flex; width: fit-content;">
      <span style="font-size: 20px;">{$t("main.languageSwitch")}</span>
    </div>
  </a>
</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 {
    width: fit-content;
  }

  .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>