From ba07a8e37508dc263ed2ef20df7e82f9e490760f Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Wed, 10 Jun 2026 23:20:46 +0200
Subject: [PATCH] refactor: improve header layout and authentication UI

- Split long href attributes for better readability
- Replace NuxtLink with button-based authentication UI
- Update BIIcon formatting for consistency
- Refactor auth section to use SVG icon with proper styling
- Change className from 'it-header-slim-right-zone' to 'header-slim-right-zone'

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/components/Header.vue | 52 ++++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/components/Header.vue b/app/components/Header.vue
index b5a81a8..57580b3 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -28,26 +28,30 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
         <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>
+              <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" >
+                  <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" />
+                    <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 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>
@@ -63,7 +67,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
               <div class="it-header-center-content-wrapper">
                 <div class="it-brand-wrapper">
                   <NuxtLink to="/">
-                    <BIIcon name="it-pa" />
+                    <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>
@@ -87,7 +91,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
                     aria-label="Mostra la navigazione"
                     @click="isMobileMenuOpen = true"
                 >
-                  <BIIcon name="it-burger" />
+                  <BIIcon name="it-burger"/>
                 </button>
 
                 <div
@@ -106,7 +110,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
                   <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" />
+                      <BIIcon name="it-close-big"/>
                     </button>
                   </div>
 
@@ -141,11 +145,25 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
 </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;