321 lines
9.2 KiB
Vue
321 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onUnmounted, ref, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import BIIcon from "~/components/BIIcon.vue";
|
|
|
|
const route = useRoute()
|
|
const isMobileMenuOpen = ref(false)
|
|
|
|
watch(() => route.path, () => {
|
|
isMobileMenuOpen.value = false
|
|
})
|
|
|
|
watch(isMobileMenuOpen, (isOpen) => {
|
|
if (typeof document !== 'undefined') {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
}
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (typeof document !== 'undefined') {
|
|
document.body.style.overflow = ''
|
|
}
|
|
})
|
|
|
|
const { isAuthenticated, user, logout, hasUnreadNotifications } = useAuth()
|
|
const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
|
|
|
|
const navLinks = [
|
|
{ name: 'Home', path: '/' },
|
|
...(isCitizen(user.value?.role) ? [{ name: 'Fai una segnalazione', path: '/reports/new' }] : []),
|
|
{ name: 'Esplora i dati', path: '/open-data' },
|
|
{ name: 'Come funziona', path: '/info' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<header class="it-header-wrapper">
|
|
<div class="it-header-slim-wrapper">
|
|
<div class="container-xxl">
|
|
<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/">
|
|
Città metropolitana di Bari
|
|
</a>
|
|
<div class="nav-mobile">
|
|
<nav aria-label="Navigazione secondaria">
|
|
<a class="it-opener d-lg-none" data-bs-toggle="collapse"
|
|
href="https://www.cittametropolitana.ba.it/"
|
|
role="button" aria-expanded="false">
|
|
<span>Città metropolitana di Bari</span>
|
|
<BIIcon name="it-expand"/>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="header-slim-right-zone" role="navigation">
|
|
<div v-if="isAuthenticated" class="d-flex align-items-center gap-2">
|
|
<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"/>
|
|
</span>
|
|
<span class="d-none d-lg-block">{{ panelLabel }}</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
|
|
data-element="personal-area-dashboard" data-focus-mouse="false">
|
|
<span class="rounded-icon profile-icon-wrap" aria-hidden="true">
|
|
<BIIcon name="it-user" color="black"/>
|
|
<span v-if="hasUnreadNotifications" class="notification-dot"></span>
|
|
</span>
|
|
<span class="d-none d-lg-block username">{{ user?.first_name }}</span>
|
|
</NuxtLink>
|
|
|
|
<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"/>
|
|
</span>
|
|
<span class="d-none d-lg-block">Esci</span>
|
|
</button>
|
|
</div>
|
|
|
|
<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"/>
|
|
</span>
|
|
<span class="d-none d-lg-block">Login</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="it-nav-wrapper">
|
|
<div class="it-header-center-wrapper">
|
|
<div class="container-xxl">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="it-header-center-content-wrapper">
|
|
<div class="it-brand-wrapper">
|
|
<NuxtLink to="/">
|
|
<img alt="Logo Visione" class="logo" src="/logo-light.svg"/>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="it-header-navbar-wrapper">
|
|
<div class="container-xxl">
|
|
<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"
|
|
aria-label="Mostra la navigazione"
|
|
@click="isMobileMenuOpen = true"
|
|
>
|
|
<BIIcon name="it-burger"/>
|
|
</button>
|
|
|
|
<div
|
|
class="overlay"
|
|
:class="{ 'show': isMobileMenuOpen }"
|
|
@click="isMobileMenuOpen = false"
|
|
></div>
|
|
|
|
<div
|
|
class="navbar-collapsable"
|
|
:class="{ 'expanded': isMobileMenuOpen }"
|
|
>
|
|
<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" color="black"/>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="menu-wrapper">
|
|
<ul class="navbar-nav">
|
|
<li
|
|
v-for="link in navLinks"
|
|
:key="link.path"
|
|
class="nav-item"
|
|
:class="{ 'active': route.path === link.path }"
|
|
>
|
|
<NuxtLink
|
|
class="nav-link"
|
|
:class="{ 'active': route.path === link.path }"
|
|
:to="link.path"
|
|
:aria-current="route.path === link.path ? 'page' : undefined"
|
|
>
|
|
<span>{{ link.name }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</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),
|
|
:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone button) {
|
|
background-color: rgb(0, 76.5, 153);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.btn-full {
|
|
padding: 14px;
|
|
}
|
|
|
|
.logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-inline: 16px;
|
|
}
|
|
|
|
.profile-icon-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.notification-dot {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -2px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #d9364f;
|
|
border: 2px solid #ffffff;
|
|
}
|
|
|
|
.username {
|
|
max-width: 8ch;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|