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
+35 -17
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" />
<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;