SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: improve header layout and authentication UI

Browse Source 
- 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 <[email protected]>
This commit is contained in:
reloia
2026-06-10 23:20:46 +02:00
co-authored by Copilot
Unverified
parent 60b1a75221
commit ba07a8e375
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.vue
+31 -13
View File
@@ -28,26 +28,30 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="it-header-slim-wrapper-content"> <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"> <div class="nav-mobile">
<nav aria-label="Navigazione secondaria"> <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> <span>Dipartmento della Pubblica Sicureazza</span>
<BIIcon name="it-expand"/> <BIIcon name="it-expand"/>
</a> </a>
</nav> </nav>
</div> </div>
<div class="it-header-slim-right-zone"> <div class="header-slim-right-zone" role="navigation">
<div class="it-access-top-wrapper"> <a class="btn btn-primary btn-icon btn-full" href="/auth/login"
<!-- Dynamic Login / Area Personale Button --> data-element="personal-area-login" data-focus-mouse="false">
<NuxtLink v-if="!isAuthenticated" class="btn btn-primary btn-sm" to="/auth/login"> <span class="rounded-icon" aria-hidden="true">
Accedi <svg class="custom-rounded-icon icon-primary">
</NuxtLink> <use
<NuxtLink v-else class="btn btn-primary btn-sm" to="/dashboard"> xlink:href="https://www.cartaidentita.interno.gov.it/./wp-content/themes/design-italia/lib/bootstrap-italia/svg/sprite.svg#it-user"></use>
Area Personale </svg>
</NuxtLink> </span>
</div> <span class="d-none d-lg-block">Login</span>
</div> </a></div>
</div> </div>
</div> </div>
</div> </div>
@@ -141,11 +145,25 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
</template> </template>
<style scoped> <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 { .overlay {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.overlay.show { .overlay.show {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;