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="header-slim-right-zone" role="navigation">
                <a class="btn btn-primary btn-icon btn-full" href="/auth/login"
                   data-element="personal-area-login" data-focus-mouse="false">
                  <span class="rounded-icon" aria-hidden="true">
                    <svg class="custom-rounded-icon icon-primary">
                                          <use
                                              xlink:href="https://www.cartaidentita.interno.gov.it/./wp-content/themes/design-italia/lib/bootstrap-italia/svg/sprite.svg#it-user"></use>
                    </svg>
                  </span>
                  <span class="d-none d-lg-block">Login</span>
                </a></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>
:deep(.it-header-slim-wrapper) {
  background-color: #036;
}

:deep(.it-nav-wrapper > div) {
  background-color: rgb(0, 76.5, 153);
}

:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone a) {

  background-color: rgb(0, 76.5, 153);
}

.overlay {
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}
</style>