171 lines
6.2 KiB
PHP
171 lines
6.2 KiB
PHP
{{--
|
|
========================================
|
|
HEADER PRINCIPALE MODULARE
|
|
========================================
|
|
Header principale con logo, barra di ricerca, notifiche e menu utente.
|
|
Completamente configurabile e responsivo.
|
|
|
|
Props disponibili:
|
|
- $showSearch (bool): Mostra barra di ricerca
|
|
- $showNotifications (bool): Mostra icona notifiche
|
|
- $showUserMenu (bool): Mostra menu utente
|
|
- $logoSize (string): Dimensione logo (sm, md, lg)
|
|
- $variant (string): Variante header (default, minimal, compact)
|
|
|
|
Autore: NetGesCon Development Team
|
|
Data: 2024
|
|
========================================
|
|
--}}
|
|
|
|
@props([
|
|
'showSearch' => true,
|
|
'showNotifications' => true,
|
|
'showUserMenu' => true,
|
|
'logoSize' => 'md',
|
|
'variant' => 'fixed'
|
|
])
|
|
|
|
<header class="netgescon-header {{ $variant }} bg-white shadow-sm" role="banner" style="position: fixed; top: 0; left: 0; right: 0; z-index: 1050; height: 70px;">
|
|
<div class="container-fluid py-2">
|
|
<div class="row align-items-center">
|
|
|
|
{{-- Mobile Menu + Logo --}}
|
|
<div class="col-auto">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button class="btn btn-outline-primary btn-uniform d-md-none"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#mobile-sidebar">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<a href="{{ route('dashboard') }}" class="navbar-brand">
|
|
<strong>NetGesCon</strong>
|
|
|
|
{{-- Dati Condominio --}}
|
|
<div class="col-auto d-none d-md-block">
|
|
<div class="d-flex gap-2">
|
|
<span class="badge bg-primary"><i class="fas fa-building"></i> Condominio Milano Centro</span>
|
|
<span class="badge bg-success"><i class="fas fa-calendar"></i> ORDINARIA 2025</span>
|
|
<span class="badge bg-warning"><i class="fas fa-thermometer-half"></i> RISCALDAMENTO 2024/25</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Ricerca Centrale - Inizia dopo sidebar, 1/3 dello spazio rimanente --}}
|
|
@if($showSearch)
|
|
<div class="col d-none d-lg-block">
|
|
<div class="search-container" style="margin-left: 20px; max-width: 280px;">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Cerca in NetGesCon..." style="height: 42px;">
|
|
<button class="btn btn-outline-primary btn-uniform" type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Azioni Rapide + Menu Utente --}}
|
|
<div class="col-auto">
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
{{-- Azioni Rapide --}}
|
|
<div class="d-none d-lg-flex gap-2">
|
|
<button class="btn btn-outline-primary btn-uniform" title="Calendario">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</button>
|
|
<button class="btn btn-outline-primary btn-uniform" title="Note Rapide">
|
|
<i class="fas fa-sticky-note"></i>
|
|
</button>
|
|
<button class="btn btn-outline-primary btn-uniform" title="Rubrica">
|
|
<i class="fas fa-address-book"></i>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Notifiche --}}
|
|
@if($showNotifications)
|
|
<button class="btn btn-outline-primary btn-uniform position-relative"
|
|
data-bs-toggle="dropdown">
|
|
<i class="fas fa-bell"></i>
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
|
3
|
|
</span>
|
|
</button>
|
|
@endif
|
|
|
|
{{-- Dark Mode --}}
|
|
<button class="btn btn-outline-primary btn-uniform"
|
|
onclick="toggleDarkMode()"
|
|
title="Cambia tema">
|
|
<i class="fas fa-moon" id="theme-icon"></i>
|
|
</button>
|
|
|
|
{{-- Menu Utente --}}
|
|
@if($showUserMenu && Auth::check())
|
|
<button class="btn btn-outline-primary btn-uniform"
|
|
data-bs-toggle="dropdown">
|
|
<i class="fas fa-user-circle"></i>
|
|
</button>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- CSS per pulsanti uniformi --}}
|
|
@push('styles')
|
|
<style>
|
|
/* PULSANTI UNIFORMI HEADER */
|
|
.btn-uniform {
|
|
width: 42px !important;
|
|
height: 42px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
border-radius: 8px !important;
|
|
transition: all 0.2s ease !important;
|
|
font-size: 16px !important;
|
|
border-width: 1px !important;
|
|
margin: 0 2px !important;
|
|
}
|
|
|
|
.btn-uniform:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* SEARCH BAR RESPONSIVE - Ottimizzata */
|
|
.search-container {
|
|
flex: 1;
|
|
max-width: 280px !important; /* 1/3 dello spazio rimanente */
|
|
margin-left: 20px !important; /* Inizia subito dopo il logo */
|
|
}
|
|
|
|
.search-container .form-control {
|
|
height: 42px !important;
|
|
border-radius: 8px 0 0 8px !important;
|
|
}
|
|
|
|
.search-container .btn-uniform {
|
|
border-radius: 0 8px 8px 0 !important;
|
|
border-left: 0 !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.search-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.search-container {
|
|
margin-left: 10px !important;
|
|
max-width: 200px !important;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|