frontend/app/components/Header.vue

<script setup lang="ts">
import { ref, computed, watch } 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/new' },
  { name: 'Esplora i dati', path: '/open-data' },
  { name: 'Come funziona', path: '/info' }
]

const { isAuthenticated, user, logout } = useAuth()
</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.cittametropolitana.ba.it/">
                Città metropolitana di Bari
              </a>
              <div class="nav-mobile">
                <nav aria-label="Navigazione secondaria">
                  <a class="it-opener d-lg-none" data-bs-toggle="collapse"
                     href="https://www.cittametropolitana.ba.it/"
                     role="button" aria-expanded="false">
                    <span>Città metropolitana di Bari</span>
                    <BIIcon name="it-expand"/>
                  </a>
                </nav>
              </div>

              <div class="header-slim-right-zone" role="navigation">
                <div v-if="isAuthenticated" class="d-flex align-items-center gap-2">
                  <NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
                            data-element="personal-area-dashboard" data-focus-mouse="false">
                    <span class="rounded-icon" aria-hidden="true">
                      <BIIcon name="it-list" color="black" />
                    </span>
                    <span class="d-none d-lg-block">Dashboard</span>
                  </NuxtLink>

                  <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
                            data-element="personal-area-dashboard" data-focus-mouse="false">
                    <span class="rounded-icon" aria-hidden="true">
                      <BIIcon name="it-user" color="black" />
                    </span>
                    <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                  </NuxtLink>

                  <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
                          data-element="personal-area-logout" data-focus-mouse="false">
                    <span class="rounded-icon" aria-hidden="true">
                      <BIIcon name="it-logout" color="black" />
                    </span>
                    <span class="d-none d-lg-block">Esci</span>
                  </button>
                </div>

                <NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
                          data-element="personal-area-login" data-focus-mouse="false">
                  <span class="rounded-icon" aria-hidden="true">
                    <BIIcon name="it-user" color="black" />
                  </span>
                  <span class="d-none d-lg-block">Login</span>
                </NuxtLink>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <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="/">
                  <img src="/icon.svg" alt="Logo Visione" style="width: 48px; height: 48px; margin-right: 16px;" />
                  <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),
:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone button) {
  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>