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

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

  const isMenuOpen = $derived(navigation.isMenuOpen)
  const currentLang = $derived(locale.current)
  const currentPage = $derived(page.template || 'home')

  const translations = {
    expertise: { fr: 'EXPERTISE', en: 'EXPERTISE' },
    games: { fr: 'GAMES', en: 'GAMES' },
    play: { fr: 'PLAY', en: 'PLAY' },
    about: { fr: 'À PROPOS', en: 'ABOUT' },
    blog: { fr: 'BLOG', en: 'BLOG' }
  }

  function t(key) {
    return translations[key]?.[currentLang] || translations[key]?.fr || key
  }

  function handleNav(path) {
    navigateTo(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>

  <div
    class="navbar-item clickable"
    class:active={currentPage === 'expertise'}
    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
    onclick={() => handleNav('/expertise')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/expertise')}
    role="button"
    tabindex="0"
  >
    {t('expertise')}
  </div>

  <div
    class="navbar-item clickable"
    class:active={currentPage === 'portfolio'}
    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
    onclick={() => handleNav('/portfolio')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/portfolio')}
    role="button"
    tabindex="0"
  >
    {t('games')}
  </div>

  <div
    class="navbar-item clickable"
    class:active={currentPage === 'jouer'}
    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
    onclick={() => handleNav('/jouer')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/jouer')}
    role="button"
    tabindex="0"
  >
    {t('play')}
  </div>

  <div
    class="navbar-item clickable"
    class:active={currentPage === 'about'}
    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
    onclick={() => handleNav('/a-propos')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/a-propos')}
    role="button"
    tabindex="0"
  >
    {t('about')}
  </div>

  <div
    class="navbar-item clickable"
    class:active={currentPage === 'blog' || currentPage === 'article'}
    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
    onclick={() => handleNav('/blog')}
    onkeypress={(e) => e.key === 'Enter' && handleNav('/blog')}
    role="button"
    tabindex="0"
  >
    {t('blog')}
  </div>

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