frontend/app/components/Header.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import BIIcon from "~/components/BIIcon.vue";

const route = useRoute()

const isMobileMenuOpen = ref(false)

watch(() => route.path, () => {
  isMobileMenuOpen.value = false
})

const navLinks = [
  { name: 'Home', path: '/' },
  { name: 'Fai una segnalazione', path: '/reports/create' },
  { name: 'Esplora i dati', path: '/open-data' },
  { name: 'Come funziona', path: '/info' }
]

const isAuthenticated = ref(false) // Replace with: const token = useCookie('auth_token'); computed(() => !!token.value)
</script>

<template>
  <header class="it-header-wrapper">
    <div class="it-header-slim-wrapper">
      <div class="container-xxl">
        <div class="row">
          <div class="col-12">
            <div class="it-header-slim-wrapper-content">
              <a class="d-none d-lg-block navbar-brand" href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza">Dipartimento della Pubblica Sicurezza</a>
              <div class="nav-mobile">
                <nav aria-label="Navigazione secondaria">
                  <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza" role="button" aria-expanded="false" >
                    <span>Dipartmento della Pubblica Sicureazza</span>
                    <BIIcon name="it-expand" />
                  </a>
                </nav>
              </div>
              <div class="it-header-slim-right-zone">
                <div class="it-access-top-wrapper">
                  <!-- Dynamic Login / Area Personale Button -->
                  <NuxtLink v-if="!isAuthenticated" class="btn btn-primary btn-sm" to="/auth/login">
                    Accedi
                  </NuxtLink>
                  <NuxtLink v-else class="btn btn-primary btn-sm" to="/dashboard">
                    Area Personale
                  </NuxtLink>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- CENTER HEADER (Brand) -->
    <div class="it-nav-wrapper">
      <div class="it-header-center-wrapper">
        <div class="container-xxl">
          <div class="row">
            <div class="col-12">
              <div class="it-header-center-content-wrapper">
                <div class="it-brand-wrapper">
                  <NuxtLink to="/">
                    <BIIcon name="it-pa" />
                    <div class="it-brand-text">
                      <div class="it-brand-title">Visione</div>
                      <div class="it-brand-tagline d-none d-md-block">Un'occhio per la sicurezza del cittadino.</div>
                    </div>
                  </NuxtLink>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="it-header-navbar-wrapper">
        <div class="container-xxl">
          <div class="row">
            <div class="col-12">
              <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
                <button
                    class="custom-navbar-toggler"
                    type="button"
                    aria-label="Mostra la navigazione"
                    @click="isMobileMenuOpen = true"
                >
                  <BIIcon name="it-burger" />
                </button>

                <div
                    class="overlay"
                    :class="{ 'show': isMobileMenuOpen }"
                    @click="isMobileMenuOpen = false"
                    style="display: block;"
                    v-show="isMobileMenuOpen"
                ></div>

                <div
                    class="navbar-collapsable"
                    :class="{ 'expanded': isMobileMenuOpen }"
                    style="display: block;"
                >
                  <div class="close-div">
                    <button class="btn close-menu" type="button" @click="isMobileMenuOpen = false">
                      <span class="visually-hidden">Nascondi la navigazione</span>
                      <BIIcon name="it-close-big" />
                    </button>
                  </div>

                  <div class="menu-wrapper">
                    <ul class="navbar-nav">
                      <li
                          v-for="link in navLinks"
                          :key="link.path"
                          class="nav-item"
                          :class="{ 'active': route.path === link.path }"
                      >
                        <NuxtLink
                            class="nav-link"
                            :class="{ 'active': route.path === link.path }"
                            :to="link.path"
                            :aria-current="route.path === link.path ? 'page' : undefined"
                        >
                          <span>{{ link.name }}</span>
                        </NuxtLink>
                      </li>
                    </ul>
                  </div>
                </div>

              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped>
.overlay {
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}
</style>