fix(ui): improve mobile menu behavior and styles

app/components/Header.vue

@@ -1,15 +1,34 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import BIIcon from "~/components/BIIcon.vue";
 
 const route = useRoute()
 const isMobileMenuOpen = ref(false)
 
+// 1. Close menu on route change
 watch(() => route.path, () => {
   isMobileMenuOpen.value = false
 })
 
+// 2. Prevent body scroll when mobile menu is open
+watch(isMobileMenuOpen, (isOpen) => {
+  if (typeof document !== 'undefined') {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+  }
+})
+
+// 3. Failsafe: Re-enable scrolling if the component is destroyed while menu is open
+onUnmounted(() => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+  }
+})
+
 const navLinks = [
   { name: 'Home', path: '/' },
   { name: 'Fai una segnalazione', path: '/reports/new' },
@@ -28,8 +47,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
         <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/">
+              <a class="d-none d-lg-block navbar-brand" href="https://www.cittametropolitana.ba.it/">
                 Città metropolitana di Bari
               </a>
               <div class="nav-mobile">
@@ -78,7 +96,6 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <span class="d-none d-lg-block">Login</span>
                 </NuxtLink>
               </div>
-
             </div>
           </div>
         </div>
@@ -93,7 +110,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
               <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;" />
+                    <img src="/icon.svg" alt="Logo Visione" class="logo"/>
                     <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>
@@ -111,6 +128,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
           <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"
@@ -124,19 +142,17 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                     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"/>
+                      <!-- FIXED: Added color="black" so it's visible on white -->
+                      <BIIcon name="it-close-big" color="black"/>
                     </button>
                   </div>
 
@@ -184,14 +200,104 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
   background-color: rgb(0, 76.5, 153);
 }
 
+/* --- MOBILE MENU FIXES --- */
+@media (max-width: 991.98px) {
   .overlay {
-  transition: opacity 0.3s ease;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    z-index: 1040;
     opacity: 0;
-  pointer-events: none;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
   }
 
   .overlay.show {
     opacity: 1;
-  pointer-events: auto;
+    visibility: visible;
+  }
+
+  .navbar-collapsable {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 320px;
+    max-width: 85vw;
+    height: 100vh;
+    background-color: #ffffff !important;
+    z-index: 1050 !important;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
+    overflow-y: auto;
+  }
+
+  .navbar-collapsable.expanded {
+    transform: translateX(0);
+  }
+
+  /* FIXED: Removed the border-bottom here */
+  .close-div {
+    display: flex;
+    justify-content: flex-end;
+    padding: 1rem 1.5rem;
+  }
+
+  .close-menu {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+
+  .close-menu :deep(svg) {
+    width: 32px;
+    height: 32px;
+  }
+
+  .menu-wrapper {
+    padding: 1rem 0;
+  }
+
+  .navbar-nav {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .nav-item {
+    width: 100%;
+  }
+
+  .nav-link {
+    display: block;
+    padding: 1rem 1.5rem;
+    color: #1a1a1a !important;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .nav-link.active {
+    color: #004c99 !important;
+    background-color: #f8f9fa;
+  }
+}
+
+.btn-full {
+  padding: 14px;
+}
+
+.logo {
+  width: 48px;
+  height: 48px;
+  margin-inline: 16px;
 }
 </style>