netgescon-master/netgescon-laravel/resources/views/components/menu/sidebar.blade.php

487 lines
16 KiB
PHP

{{--
========================================
SIDEBAR NETGESCON CON SUBMENU E PERMESSI
========================================
--}}
@props([
'stabileAttivo' => 'Condominio Milano Centro',
'userRoles' => ['amministratore']
])
{{-- CSS per sidebar compatta --}}
<style>
.netgescon-sidebar {
width: 280px;
min-width: 280px;
max-width: 280px;
font-size: 0.875rem;
}
.netgescon-sidebar .nav-link {
padding: 0.375rem 0.5rem !important;
font-size: 0.8rem;
border-radius: 6px;
margin-bottom: 2px;
}
.netgescon-sidebar .nav-link:hover {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
}
.netgescon-sidebar .nav-link.active {
background-color: #0d6efd;
color: white;
}
.netgescon-sidebar .small {
font-size: 0.75rem !important;
}
.card-sm .card-body {
padding: 0.5rem !important;
}
.card-sm .card-title {
font-size: 0.8rem !important;
margin-bottom: 0.25rem !important;
}
.badge {
font-size: 0.6rem !important;
padding: 0.2rem 0.4rem !important;
}
</style>
<div class="netgescon-sidebar d-flex flex-column h-100 bg-light border-end" id="netgesconSidebar">
{{-- Header Sidebar Essenziale --}}
<div class="p-2 border-bottom bg-light">
{{-- Logo NetGesCon --}}
<div class="text-center mb-2">
<i class="fas fa-building text-primary me-1"></i>
<span class="text-primary fw-bold small">NETGESCON</span>
</div>
{{-- Data e Ora in tempo reale --}}
<div class="text-center">
<small class="text-muted" id="datetime-display">
<i class="fas fa-clock me-1"></i>
<span id="current-datetime">{{ date('d/m/Y H:i') }}</span>
</small>
</div>
</div>
{{-- Box Notizie --}}
<div class="p-2 border-bottom">
<div class="card card-sm bg-info text-white">
<div class="card-body p-2">
<h6 class="card-title mb-1 small">
<i class="fas fa-bell me-1"></i>Notizie
</h6>
<div class="small">
<div class="mb-1"> 3 tickets urgenti da risolvere</div>
<div class="mb-1"> Backup completato con successo</div>
<div> Rate scadute: €1.240</div>
</div>
</div>
</div>
</div>
{{-- Menu Navigation Compatto --}}
<nav class="sidebar-nav flex-fill overflow-auto p-1" role="navigation">
<ul class="nav nav-pills flex-column">
{{-- Dashboard --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('dashboard'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('dashboard') }}">
<i class="fas fa-tachometer-alt me-2 small"></i>
<span class="small">Dashboard</span>
</a>
</li>
@endif
{{-- Stabili --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('stabili'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2"
data-bs-toggle="collapse" href="#stabiliMenu" role="button">
<div class="d-flex align-items-center">
<i class="fas fa-building me-2 small"></i>
<span class="small">Stabili</span>
</div>
<i class="fas fa-chevron-down small"></i>
</a>
<div class="collapse ms-2" id="stabiliMenu">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link text-muted py-1 px-2" href="{{ route('admin.stabili.index') }}">
<i class="fas fa-list me-2 small"></i>
<span class="small">Lista Stabili</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted py-1 px-2" href="{{ route('admin.stabili.create') }}">
<i class="fas fa-plus me-2 small"></i>
<span class="small">Nuovo Stabile</span>
</a>
</li>
</ul>
</div>
</li>
@endif
{{-- Condomini --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('condomini'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2"
data-bs-toggle="collapse" href="#condominiMenu" role="button">
<div class="d-flex align-items-center">
<i class="fas fa-users me-2 small"></i>
<span class="small">Condomini</span>
</div>
<i class="fas fa-chevron-down small"></i>
</a>
<div class="collapse ms-2" id="condominiMenu">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link text-muted py-1 px-2" href="{{ route('admin.condomini.index') }}">
<i class="fas fa-list me-2 small"></i>
<span class="small">Lista Condomini</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted py-1 px-2" href="{{ route('admin.condomini.create') }}">
<i class="fas fa-user-plus me-2 small"></i>
<span class="small">Nuovo Condomino</span>
</a>
</li>
</ul>
</div>
</li>
@endif
{{-- Contabilità --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('contabilita'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2"
data-bs-toggle="collapse" href="#contabilitaMenu" role="button">
<div class="d-flex align-items-center">
<i class="fas fa-calculator me-2 small"></i>
<span class="small">Contabilità</span>
</div>
<i class="fas fa-chevron-down small"></i>
</a>
<div class="collapse ms-2" id="contabilitaMenu">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link text-muted py-1 px-2" href="{{ route('admin.contabilita.index') }}">
<i class="fas fa-chart-line me-2 small"></i>
<span class="small">Dashboard Contabile</span>
</a>
</li>
</ul>
</div>
</li>
@endif
{{-- Assemblee --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('assemblee'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.assemblee.index') }}">
<i class="fas fa-users-cog me-2 small"></i>
<span class="small">Assemblee</span>
</a>
</li>
@endif
{{-- Risorse Economiche --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('risorse-economiche'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.risorse-economiche.index') }}">
<i class="fas fa-coins me-2 small"></i>
<span class="small">Risorse Economiche</span>
</a>
</li>
@endif
{{-- Affitti --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('affitti'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.affitti.index') }}">
<i class="fas fa-key me-2 small"></i>
<span class="small">Affitti</span>
</a>
</li>
@endif
{{-- Fiscale --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('fiscale'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.fiscale.index') }}">
<i class="fas fa-receipt me-2 small"></i>
<span class="small">Fiscale</span>
</a>
</li>
@endif
{{-- Comunicazioni --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('comunicazioni'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.comunicazioni.index') }}">
<i class="fas fa-envelope me-2 small"></i>
<span class="small">Comunicazioni</span>
</a>
</li>
@endif
{{-- Pratiche --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('pratiche'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.pratiche.index') }}">
<i class="fas fa-folder me-2 small"></i>
<span class="small">Pratiche</span>
</a>
</li>
@endif
{{-- Consumi --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('consumi'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.consumi.index') }}">
<i class="fas fa-bolt me-2 small"></i>
<span class="small">Consumi</span>
</a>
</li>
@endif
{{-- Tickets --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('tickets'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.tickets.index') }}">
<i class="fas fa-ticket-alt me-2 small"></i>
<span class="small">Tickets</span>
<span class="badge bg-danger ms-auto small">3</span>
</a>
</li>
@endif
{{-- Impostazioni (solo admin) --}}
@if(App\Helpers\MenuHelper::canUserAccessMenu('impostazioni'))
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.impostazioni.index') }}">
<i class="fas fa-cog me-2 small"></i>
<span class="small">Impostazioni</span>
</a>
</li>
@endif
</ul>
</nav>
{{-- Footer --}}
@include('components.menu.sections.footer')
</div>
{{-- CSS per sidebar --}}
@push('styles')
<style>
/* Sidebar moderna con gradiente */
.netgescon-sidebar {
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}
/* Header sidebar con effetto */
.netgescon-sidebar .border-bottom {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 0 0 15px 15px;
color: white !important;
margin: -12px -12px 12px -12px;
padding: 1rem !important;
}
.netgescon-sidebar .border-bottom * {
color: white !important;
}
.netgescon-sidebar .bg-primary {
background: rgba(255,255,255,0.2) !important;
border: 1px solid rgba(255,255,255,0.3);
}
/* Sidebar scrollbar moderna */
.sidebar-nav {
scrollbar-width: thin;
scrollbar-color: #007bff #f8f9fa;
}
.sidebar-nav::-webkit-scrollbar {
width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: #007bff;
border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
/* Menu items moderni */
.nav-pills .nav-link {
border-radius: 10px;
margin: 3px 0;
transition: all 0.3s ease;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.nav-pills .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.nav-pills .nav-link:hover::before {
left: 100%;
}
.nav-pills .nav-link:hover {
background-color: #e7f3ff;
border-color: #007bff;
transform: translateX(5px);
color: #007bff;
box-shadow: 0 4px 12px rgba(0,123,255,0.2);
}
.nav-pills .nav-link.active {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
box-shadow: 0 4px 15px rgba(0,123,255,0.4);
transform: translateX(3px);
}
/* Submenu con indentazione */
.collapse .nav-link {
background-color: rgba(0, 123, 255, 0.05);
border-left: 3px solid transparent;
margin-left: 15px;
border-radius: 0 8px 8px 0;
}
.collapse .nav-link:hover {
border-left-color: #007bff;
background-color: rgba(0, 123, 255, 0.1);
}
/* Badge animati */
.badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* Icone con colori */
.nav-link i {
width: 20px;
text-align: center;
transition: transform 0.3s ease;
}
.nav-link:hover i {
transform: scale(1.1);
}
/* Footer sidebar */
.netgescon-sidebar .border-top {
background: rgba(0,0,0,0.05);
margin: 0 -8px -8px -8px;
padding: 0.75rem !important;
}
/* Responsive */
@media (max-width: 768px) {
.netgescon-sidebar {
box-shadow: none;
}
}
</style>
@endpush
{{-- JavaScript per aggiornamento ora --}}
@push('scripts')
<script>
function updateDateTime() {
const now = new Date();
const formatted = now.toLocaleString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
document.getElementById('current-datetime').textContent = formatted;
}
// Aggiorna ogni minuto
setInterval(updateDateTime, 60000);
updateDateTime(); // Prima chiamata
// Accordion menu - chiudi altri quando uno si apre
document.addEventListener('DOMContentLoaded', function() {
const toggles = document.querySelectorAll('[data-bs-toggle="collapse"]');
toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
const target = this.getAttribute('href');
const otherCollapses = document.querySelectorAll('.collapse.show');
// Chiudi tutti gli altri collapse aperti
otherCollapses.forEach(collapse => {
if ('#' + collapse.id !== target) {
const bsCollapse = new bootstrap.Collapse(collapse, {toggle: false});
bsCollapse.hide();
}
});
});
});
// Animazione icone collapse
document.addEventListener('shown.bs.collapse', function(e) {
const trigger = document.querySelector(`[href="#${e.target.id}"]`);
if (trigger) {
const icon = trigger.querySelector('.fa-chevron-down');
if (icon) icon.style.transform = 'rotate(180deg)';
}
});
document.addEventListener('hidden.bs.collapse', function(e) {
const trigger = document.querySelector(`[href="#${e.target.id}"]`);
if (trigger) {
const icon = trigger.querySelector('.fa-chevron-down');
if (icon) icon.style.transform = 'rotate(0deg)';
}
});
});
</script>
@endpush