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="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"/>
</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>
@@ -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;