From a3b0102c81b2551aae7056b8c01428038b4a50b3 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Mon, 15 Jun 2026 23:12:39 +0200
Subject: [PATCH] fix(ui): improve mobile menu behavior and styles

---
 app/components/Header.vue | 160 +++++++++++++++++++++++++++++++-------
 1 file changed, 133 insertions(+), 27 deletions(-)

diff --git a/app/components/Header.vue b/app/components/Header.vue
index 660dc75..12ffb60 100644
--- a/app/components/Header.vue
+++ b/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">
@@ -48,7 +66,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <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" />
+                      <BIIcon name="it-list" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">{{ panelLabel }}</span>
                   </NuxtLink>
@@ -56,7 +74,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <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" />
+                      <BIIcon name="it-user" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -64,7 +82,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <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" />
+                      <BIIcon name="it-logout" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">Esci</span>
                   </button>
@@ -73,12 +91,11 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                 <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" />
+                    <BIIcon name="it-user" color="black"/>
                   </span>
                   <span class="d-none d-lg-block">Login</span>
                 </NuxtLink>
               </div>
-
             </div>
           </div>
         </div>
@@ -92,13 +109,13 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
             <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>
+                  <NuxtLink to="/">
+                    <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>
+                    </div>
+                  </NuxtLink>
                 </div>
               </div>
             </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);
 }
 
-.overlay {
-  transition: opacity 0.3s ease;
-  opacity: 0;
-  pointer-events: none;
+/* --- MOBILE MENU FIXES --- */
+@media (max-width: 991.98px) {
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+
+  .overlay.show {
+    opacity: 1;
+    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;
+  }
 }
 
-.overlay.show {
-  opacity: 1;
-  pointer-events: auto;
+.btn-full {
+  padding: 14px;
 }
-</style>
+
+.logo {
+  width: 48px;
+  height: 48px;
+  margin-inline: 16px;
+}
+</style>
\ No newline at end of file