# 🎯 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**
```css
/* 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**
```css
.netgescon-header {
    height: 70px;
    padding: 0 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
```

---

## 🧩 **COMPONENTI HEADER**

### 1. **🏢 LOGO & BRAND**
```blade
<!-- 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**
```blade
<!-- 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**
```blade
<!-- 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**
```blade
<!-- 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**
```blade
<!-- 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`

```javascript
/**
 * 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**
```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**
```blade
@auth
    <!-- Header content per utenti autenticati -->
@else
    <!-- Header minimal per guest -->
@endauth
```

### 👥 **Role-Based Features**
```blade
<!-- 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**
1. **CSS Critical** - Inline styles per header immediato
2. **JavaScript Lazy** - Load componenti on interaction  
3. **Images Optimization** - SVG per logo, WebP per avatar
4. **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:** 
```css
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

### 🚨 **Problema:** Dropdown fuori schermo
**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*