michele 3420e37114 chore: NetGescon day-0 baseline 2026-03-10

2026-03-10 21:00:01 +00:00

10 KiB

Executable File

Raw Blame History

🎯 HEADER - Documentazione Completa NetGescon

Componente Header dell'interfaccia universale
📅 Creato: 21/07/2025
🔄 Ultimo aggiornamento: 21/07/2025
🎯 Priorità: 🔥 CRITICA

📋 OVERVIEW HEADER

Il Header NetGescon è il componente FIXED TOP che contiene:

🏢 Logo e Brand
🔍 Search Global
📢 Notifications
👤 User Profile Menu
📱 Mobile Menu Toggle

📐 Specifiche Layout

Altezza: 70px fisso
Posizione: fixed top-0 sempre visibile
Z-index: 1000 sopra tutti gli elementi
Background: Gradiente primario NetGescon

🎨 DESIGN SPECIFICATIONS

🌈 Color Palette

/* Background Gradient */
background: linear-gradient(135deg, 
    var(--netgescon-primary) 0%, 
    var(--netgescon-primary-dark) 100%
);

/* Hover States */
--hover-bg: rgba(255, 255, 255, 0.1);
--active-bg: rgba(255, 255, 255, 0.2);

📏 Dimensions

.netgescon-header {
    height: 70px;
    padding: 0 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

🧩 COMPONENTI HEADER

1. 🏢 LOGO & BRAND

<!-- Logo Section -->
<div class="header-brand flex items-center space-x-3">
    <img src="{{ asset('images/netgescon/logo-white.svg') }}" 
         alt="NetGescon" 
         class="h-8 w-auto">
    <span class="text-xl font-bold text-white hidden md:block">
        NetGescon
    </span>
    <span class="text-xs text-blue-200 hidden lg:block">
        v2.1.0
    </span>
</div>

2. 🔍 SEARCH GLOBAL

<!-- Global Search -->
<div class="header-search flex-1 max-w-md mx-4 hidden md:block">
    <div class="relative">
        <input type="text" 
               id="global-search"
               placeholder="Cerca condomini, unità, contratti..."
               class="w-full px-4 py-2 pl-10 pr-4 
                      bg-white/10 border border-white/20 
                      rounded-lg text-white placeholder-blue-200
                      focus:bg-white/20 focus:border-white/40
                      transition-all duration-200">
        <i class="fas fa-search absolute left-3 top-3 text-blue-200"></i>
    </div>
</div>

3. 📢 NOTIFICATIONS

<!-- Notifications -->
<div class="header-notifications relative">
    <button class="notification-toggle p-2 rounded-lg 
                   hover:bg-white/10 transition-colors relative">
        <i class="fas fa-bell text-white text-lg"></i>
        <!-- Badge notifiche -->
        <span class="notification-badge absolute -top-1 -right-1 
                     bg-red-500 text-white text-xs rounded-full 
                     w-5 h-5 flex items-center justify-center">
            3
        </span>
    </button>
    
    <!-- Dropdown Notifications -->
    <div class="notifications-dropdown hidden absolute right-0 top-12 
                w-80 bg-white rounded-lg shadow-xl border">
        <!-- Contenuto notifiche -->
    </div>
</div>

4. 👤 USER PROFILE

<!-- User Profile -->
<div class="header-user relative">
    <button class="user-toggle flex items-center space-x-2 p-2 
                   rounded-lg hover:bg-white/10 transition-colors">
        <img src="{{ auth()->user()->avatar ?? asset('images/avatar-default.svg') }}" 
             alt="User" 
             class="w-8 h-8 rounded-full border-2 border-white/30">
        <span class="text-white font-medium hidden lg:block">
            {{ auth()->user()->name }}
        </span>
        <i class="fas fa-chevron-down text-white/70 text-sm"></i>
    </button>
    
    <!-- Dropdown User Menu -->
    <div class="user-dropdown hidden absolute right-0 top-12 
                w-64 bg-white rounded-lg shadow-xl border">
        <!-- Menu utente -->
    </div>
</div>

5. 📱 MOBILE TOGGLE

<!-- Mobile Menu Toggle -->
<button class="mobile-toggle md:hidden p-2 rounded-lg 
               hover:bg-white/10 transition-colors"
        onclick="toggleMobileMenu()">
    <i class="fas fa-bars text-white text-lg"></i>
</button>

🔧 JAVASCRIPT FUNCTIONALITY

📁 File: `/public/js/components/header.js`

/**
 * Header NetGescon - JavaScript Functions
 */

// Global Search
function initializeGlobalSearch() {
    const searchInput = document.getElementById('global-search');
    const searchResults = document.getElementById('search-results');
    
    let searchTimeout;
    
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        
        searchTimeout = setTimeout(() => {
            const query = this.value.trim();
            if (query.length >= 2) {
                performGlobalSearch(query);
            } else {
                hideSearchResults();
            }
        }, 300);
    });
}

// Notifications
function initializeNotifications() {
    const notificationToggle = document.querySelector('.notification-toggle');
    const notificationDropdown = document.querySelector('.notifications-dropdown');
    
    notificationToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        notificationDropdown.classList.toggle('hidden');
        
        // Marca come lette
        markNotificationsAsRead();
    });
    
    // Chiudi click outside
    document.addEventListener('click', function() {
        notificationDropdown.classList.add('hidden');
    });
}

// User Menu
function initializeUserMenu() {
    const userToggle = document.querySelector('.user-toggle');
    const userDropdown = document.querySelector('.user-dropdown');
    
    userToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        userDropdown.classList.toggle('hidden');
    });
    
    // Chiudi click outside
    document.addEventListener('click', function() {
        userDropdown.classList.add('hidden');
    });
}

// Mobile Menu
function toggleMobileMenu() {
    const sidebar = document.querySelector('.netgescon-sidebar');
    const overlay = document.querySelector('.mobile-overlay');
    
    sidebar.classList.toggle('mobile-open');
    
    if (!overlay) {
        createMobileOverlay();
    } else {
        overlay.classList.toggle('hidden');
    }
}

📱 RESPONSIVE BEHAVIOR

🖥️ Desktop (≥1024px)

Logo completo con testo
Search bar visibile e funzionale
Tutti i componenti visibili
Dropdown menu posizionamento ottimale

📱 Tablet (768px - 1023px)

Logo con testo ridotto
Search bar ridotta
Notifications e user menu compatti
Mobile toggle nascosto

📱 Mobile (≤767px)

Solo logo icon
Search bar nascosta (disponibile in sidebar)
Notifications badge only
Mobile toggle visibile
User menu compatto

📐 Breakpoints CSS

/* Mobile First Approach */
.netgescon-header {
    /* Mobile styles di base */
}

@media (min-width: 768px) {
    .netgescon-header {
        /* Tablet adjustments */
    }
}

@media (min-width: 1024px) {
    .netgescon-header {
        /* Desktop full features */
    }
}

🔐 SECURITY & PERMISSIONS

🛡️ Authentication Required

@auth
    <!-- Header content per utenti autenticati -->
@else
    <!-- Header minimal per guest -->
@endauth

👥 Role-Based Features

<!-- Admin-only features -->
@can('admin-panel')
    <div class="admin-quick-access">
        <!-- Quick admin tools -->
    </div>
@endcan

<!-- Notifications per ruolo -->
@if(auth()->user()->can('view-notifications'))
    @include('components.header.notifications')
@endif

⚡ PERFORMANCE OPTIMIZATION

🚀 Loading Strategy

CSS Critical - Inline styles per header immediato
JavaScript Lazy - Load componenti on interaction
Images Optimization - SVG per logo, WebP per avatar
Cache Strategy - Headers cache-friendly

📊 Metrics Target

First Paint: < 100ms
Interactive: < 200ms
Smooth Animations: 60fps
Accessibility Score: 100/100

🧪 TESTING CHECKLIST

✅ Functional Tests

Logo click → Homepage redirect
Search → Results display
Notifications → Badge update
User menu → Profile access
Mobile toggle → Sidebar open/close

✅ Visual Tests

Header height consistent (70px)
Gradiente background correct
Icons alignment perfect
Responsive breakpoints working
Hover states smooth

✅ Accessibility Tests

Tab navigation working
Screen reader compatible
Color contrast WCAG AA
Keyboard shortcuts functional
Focus indicators visible

🐛 COMMON ISSUES & FIXES

🚨 Problema: Header si sovrappone al contenuto

Causa: Z-index conflicts o padding body mancante
Fix:

body { padding-top: 70px; }
.netgescon-header { z-index: 1000; }

🚨 Problema: Logo non carica su mobile

Causa: Path immagine errato o dimensioni eccessive
Fix: Verifica path e ottimizza SVG

🚨 Problema: Search non funziona

Causa: JavaScript non inizializzato o endpoint API mancante
Fix: Verifica console errors e route API

Causa: Posizionamento absolute incorrect
Fix: Usa libreria positioning come Popper.js

📚 FILES CORRELATI

🎨 Styles

/public/css/netgescon-admin.css - Main styles
/public/css/components/header.css - Header specific

🧩 Templates

/resources/views/components/layout/header.blade.php - Main template
/resources/views/components/header/ - Sub-components

⚡ JavaScript

/public/js/netgescon-admin.js - Main script
/public/js/components/header.js - Header specific

🖼️ Assets

/public/images/netgescon/logo-white.svg - Logo principale
/public/images/netgescon/logo-icon.svg - Logo mobile
/public/images/avatar-default.svg - Avatar default

🎯 NEXT STEPS

🔮 Planned Improvements

Voice Search - Ricerca vocale
Quick Actions - Shortcut frequent actions
Theme Switcher - Dark/Light mode toggle
Multi-language - Selector lingua
Advanced Notifications - Real-time updates

📝 Documento mantenuto da: GitHub Copilot AI Assistant
🔗 Componente: Header NetGescon Interface v2.1.0

10 KiB Executable File Raw Blame History