Regalamiunsorriso/faceai/apps/frontend/src/components/LegacyHeader.vue

<script setup>
import { ref } from 'vue';
import { legacyAsset } from '../legacyAssets.js';

const logoUrl = legacyAsset('/images/layout/regalami-un-sorriso-ets-640.png');
const facebookUrl = legacyAsset('/images/FB-f-Logo__blue_29.png');
const donateUrl = legacyAsset('/images/btn_donateCC_LG.gif');
const isMenuOpen = ref(false);

function toggleMenu() {
  isMenuOpen.value = !isMenuOpen.value;
}

function closeMenu() {
  isMenuOpen.value = false;
}
</script>

<template>
  <div>
    <a id="top"></a>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white fixed-top">
      <div class="container">
        <a class="navbar-brand" href="http://localhost:8080/faceai_simulator.php?raceId=101&lang=it">
          <img :src="logoUrl" alt="Regalami Un Sorriso ETS" width="100" />
        </a>
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          aria-controls="navbarResponsive"
          :aria-expanded="isMenuOpen ? 'true' : 'false'"
          aria-label="Toggle navigation"
          @click="toggleMenu"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div :class="['collapse', 'navbar-collapse', { show: isMenuOpen }]" id="navbarResponsive">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="http://localhost:8080/index.jsp" @click="closeMenu">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="http://localhost:8080/associazione.jsp" @click="closeMenu">Associazione</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="http://localhost:8080/faceai_simulator.php?raceId=101&lang=it" @click="closeMenu">Foto</a>
            </li>
            <li class="nav-item">
              <a class="nav-link btn btn-sm btn-warning" href="http://localhost:8080/gallery2.php" @click="closeMenu">Archivio</a>
            </li>
            <li class="nav-item">
              <a href="http://localhost:8080/dettaglio_clienti-it.html" @click="closeMenu">
                <img :src="donateUrl" border="0" alt="PayPal" />
              </a>
            </li>
          </ul>

          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#" @click="closeMenu">
                <i class="fa fa-user" aria-hidden="true"></i> Il mio account
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://it-it.facebook.com/pg/Regalami-un-sorriso-ETS-189377806523/community/" @click="closeMenu">
                <img :src="facebookUrl" class="img-fluid" alt="Facebook" />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>