world-game/src/components/layout/Header.svelte

<script>
  import { navigation } from '@state/navigation.svelte'
  import { locale } from '@state/locale.svelte'
  import { slides } from '@state/slides.svelte'
  import { slideTo } from '@router'

  const isMenuOpen = $derived(navigation.isMenuOpen)
  const currentLang = $derived(locale.current)
  const activeId = $derived(slides.active?.id ?? 'home')
  const menuItems = $derived(slides.all.filter(s => s.id !== 'home'))

  function getTitle(slide) {
    return slide.titles?.[currentLang] || slide.title || slide.id
  }

  function handleNav(path) {
    slideTo(path)
  }

  function toggleMenu() {
    navigation.toggleMenu()
  }
</script>

<div class="navbar">
  <div
    class="clickable"
    style="
      z-index: 60;
      position: absolute;
      float: left;
      left: 5vh;
      top: 50%;
      transform: translateY(-50%);
    "
    onclick={() => handleNav('/')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/')}
    role="button"
    tabindex="0"
  >
    <img
      src="/assets/img/GIF_world_game_planete.gif"
      alt="World Game"
      class="clickable wg-logo"
    />
  </div>

  {#each menuItems as slide}
    <div
      class="navbar-item clickable"
      class:active={activeId === slide.id}
      style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
      onclick={() => handleNav(slide.path)}
      onkeypress={(e) => e.key === 'Enter' && handleNav(slide.path)}
      role="button"
      tabindex="0"
    >
      {getTitle(slide)}
    </div>
  {/each}

  <div
    class="clickable"
    style="
      z-index: 60;
      position: absolute;
      float: right;
      right: 5vh;
      top: 50%;
      transform: translateY(-50%);
    "
    onclick={toggleMenu}
    onkeypress={(e) => e.key === 'Enter' && toggleMenu()}
    role="button"
    tabindex="0"
  >
    <svg
      width="50"
      height="50"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style="height: 4.5vh; min-height: 36px;"
    >
      <circle
        cx="7"
        cy="7"
        r="2"
        fill="white"
        style="
          transform: {isMenuOpen ? 'translate(5px, 5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
          transform-origin: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        "
      />

      <circle
        cx="17"
        cy="7"
        r="2"
        fill="white"
        style="
          transform: {isMenuOpen ? 'translate(-5px, 5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
          transform-origin: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        "
      />

      <circle
        cx="7"
        cy="17"
        r="2"
        fill="white"
        style="
          transform: {isMenuOpen ? 'translate(5px, -5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
          transform-origin: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        "
      />

      <circle
        cx="17"
        cy="17"
        r="2"
        fill="white"
        style="
          transform: {isMenuOpen ? 'translate(-5px, -5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
          transform-origin: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        "
      />

      <line
        x1="9"
        y1="9"
        x2="15"
        y2="15"
        stroke="white"
        stroke-width="2.5"
        stroke-linecap="round"
        style="
          opacity: {isMenuOpen ? 1 : 0};
          transition: opacity 0.2s ease-in-out;
          transition-delay: {isMenuOpen ? '0.1s' : '0s'};
        "
      />
      <line
        x1="15"
        y1="9"
        x2="9"
        y2="15"
        stroke="white"
        stroke-width="2.5"
        stroke-linecap="round"
        style="
          opacity: {isMenuOpen ? 1 : 0};
          transition: opacity 0.2s ease-in-out;
          transition-delay: {isMenuOpen ? '0.1s' : '0s'};
        "
      />
    </svg>
  </div>
</div>

<style>
  .navbar {
    width: 100%;
    align-items: center;
    justify-self: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    font-family: "Danzza";
    font-size: var(--font-size-paragraph);
    font-weight: normal;
    color: white;
    text-align: center !important;
    text-transform: uppercase;
    padding: 2vh 0 2vh 0;
    backdrop-filter: blur(0px);
    transition: all 0.3s ease-in-out;
  }

  .navbar-item {
    display: inline-block;
    padding: 1vmax 2vmax;
    font-weight: bold;
    vertical-align: middle;
    position: relative;
    z-index: 5;
    color: white;
    transition: color 0.3s;
  }

  .navbar-item.active {
    color: #04fea0;
  }

  .navbar-item:hover {
    color: #04fea0;
  }

  .wg-logo {
    height: 4.8vh;
    pointer-events: none;
  }

  .clickable {
    cursor: pointer;
    user-select: none;
  }

  @media screen and (max-width: 700px) {
    .navbar-item {
      font-size: var(--font-size-paragraph-mobile);
      padding: 1vmax 1.5vmax;
    }
  }

  @media screen and (min-width: 701px) and (max-width: 912px) {
    .navbar-item {
      font-size: var(--font-size-paragraph-tablet);
      padding: 1vmax 1.8vmax;
    }
  }
</style>