128 lines
3.6 KiB
PHP
128 lines
3.6 KiB
PHP
{{--
|
|
========================================
|
|
LOGO E BRAND MODULARE
|
|
========================================
|
|
Componente logo con dimensioni configurabili
|
|
e toggle per sidebar mobile.
|
|
|
|
Props:
|
|
- $size (string): sm, md, lg, xl
|
|
- $showToggle (bool): Mostra toggle sidebar
|
|
- $variant (string): normal, compact, icon-only
|
|
|
|
Autore: NetGesCon Development Team
|
|
Data: 2024
|
|
========================================
|
|
--}}
|
|
|
|
@props([
|
|
'size' => 'md',
|
|
'showToggle' => true,
|
|
'variant' => 'normal'
|
|
])
|
|
|
|
@php
|
|
$logoSizes = [
|
|
'sm' => ['height' => '32px', 'fontSize' => '1rem'],
|
|
'md' => ['height' => '40px', 'fontSize' => '1.25rem'],
|
|
'lg' => ['height' => '48px', 'fontSize' => '1.5rem'],
|
|
'xl' => ['height' => '56px', 'fontSize' => '1.75rem']
|
|
];
|
|
|
|
$currentSize = $logoSizes[$size] ?? $logoSizes['md'];
|
|
@endphp
|
|
|
|
<div class="netgescon-brand d-flex align-items-center">
|
|
|
|
{{-- Toggle Sidebar per Desktop e Mobile --}}
|
|
@if($showToggle)
|
|
<button class="btn btn-outline-secondary me-2"
|
|
type="button"
|
|
onclick="toggleSidebar()"
|
|
aria-label="Toggle menu"
|
|
title="Apri/Chiudi menu laterale">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
@endif
|
|
|
|
{{-- Logo --}}
|
|
<a href="{{ route('dashboard') }}" class="netgescon-logo d-flex align-items-center text-decoration-none">
|
|
|
|
{{-- Icona/Logo Image --}}
|
|
@if(config('app.logo_path'))
|
|
<img src="{{ asset(config('app.logo_path')) }}"
|
|
alt="NetGesCon Logo"
|
|
style="height: {{ $currentSize['height'] }};"
|
|
class="me-2">
|
|
@else
|
|
<div class="logo-icon d-flex align-items-center justify-content-center me-2"
|
|
style="width: {{ $currentSize['height'] }}; height: {{ $currentSize['height'] }};">
|
|
<i class="fas fa-building text-primary" style="font-size: calc({{ $currentSize['height'] }} * 0.6);"></i>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Nome Applicazione --}}
|
|
@if($variant !== 'icon-only')
|
|
<div class="brand-text {{ $variant === 'compact' ? 'd-none d-lg-block' : '' }}">
|
|
<h1 class="mb-0 fw-bold text-primary" style="font-size: {{ $currentSize['fontSize'] }};">
|
|
{{ config('app.name', 'NetGesCon') }}
|
|
</h1>
|
|
@if($size !== 'sm' && $variant !== 'compact')
|
|
<small class="text-muted d-none d-xl-block">Sistema Gestione Condominiale</small>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
</a>
|
|
|
|
{{-- Badge Versione/Ambiente (solo in sviluppo) --}}
|
|
@if(config('app.env') !== 'production')
|
|
<span class="badge bg-warning text-dark ms-2 d-none d-lg-inline">
|
|
{{ config('app.env') === 'local' ? 'DEV' : strtoupper(config('app.env')) }}
|
|
</span>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
{{-- CSS specifico per logo --}}
|
|
@push('styles')
|
|
<style>
|
|
.netgescon-logo {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.netgescon-logo:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.logo-icon {
|
|
background: linear-gradient(135deg, var(--netgescon-primary, #007bff), var(--netgescon-secondary, #6c757d));
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.brand-text h1 {
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Tema scuro */
|
|
.dark .netgescon-logo {
|
|
color: var(--bs-light) !important;
|
|
}
|
|
|
|
.dark .brand-text small {
|
|
color: var(--bs-gray-400) !important;
|
|
}
|
|
|
|
/* Animazioni */
|
|
@keyframes logoGlow {
|
|
0%, 100% { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
50% { box-shadow: 0 4px 8px rgba(0,123,255,0.3); }
|
|
}
|
|
|
|
.logo-icon:hover {
|
|
animation: logoGlow 2s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
@endpush
|