# 🗂️ PATTERN MENU E NAVIGAZIONE
## Template per menu e sub-menu standard

---

## 🏗️ **PATTERN 1: MENU PRINCIPALE CON SUB-TABS**

### 🎯 **Utilizzo**: Moduli principali (Contabilità, Stabili, Condomini)

### **Template Menu Tabs**:
```blade
@section('menu-tabs')
<li class="nav-item">
    <a class="nav-link active" 
       href="{{ route('admin.MODULO.index') }}"
       role="tab">
        <i class="fas fa-list"></i> Lista Principale
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.MODULO.create') }}"
       role="tab">
        <i class="fas fa-plus"></i> Nuovo Item
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.MODULO.reports') }}"
       role="tab">
        <i class="fas fa-chart-bar"></i> Reports
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.MODULO.config') }}"
       role="tab">
        <i class="fas fa-cog"></i> Configurazione
    </a>
</li>
@endsection
```

### **Esempio Completo per Fornitori**:
```blade
@section('menu-tabs')
<li class="nav-item">
    <a class="nav-link active" 
       href="{{ route('admin.fornitori.index') }}"
       role="tab">
        <i class="fas fa-list"></i> Lista Fornitori
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.fornitori.create') }}"
       role="tab">
        <i class="fas fa-plus"></i> Nuovo Fornitore
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.fornitori.categorie') }}"
       role="tab">
        <i class="fas fa-tags"></i> Categorie
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" 
       href="{{ route('admin.fornitori.reports') }}"
       role="tab">
        <i class="fas fa-chart-bar"></i> Reports
    </a>
</li>
@endsection
```

---

## 🏗️ **PATTERN 2: SUB-MENU NAVIGAZIONE**

### 🎯 **Utilizzo**: Pagine dettaglio con tabs (Show views)

### **Template Tabs Detail**:
```blade
<!-- Tabs Container -->
<div class="bg-white rounded-lg shadow-sm border">
    <!-- Tab Navigation -->
    <div class="border-b border-gray-200 px-6 pt-6">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs" role="tablist">
            <button class="netgescon-tab-btn active" 
                    data-tab="dati-generali" 
                    type="button" 
                    role="tab">
                <i class="fas fa-info-circle mr-2"></i>
                Dati Generali
            </button>
            <button class="netgescon-tab-btn" 
                    data-tab="dettagli" 
                    type="button" 
                    role="tab">
                <i class="fas fa-list mr-2"></i>
                Dettagli
            </button>
            <button class="netgescon-tab-btn" 
                    data-tab="documenti" 
                    type="button" 
                    role="tab">
                <i class="fas fa-file mr-2"></i>
                Documenti
            </button>
        </nav>
    </div>
    
    <!-- Tab Content -->
    <div class="p-6">
        <div id="dati-generali" class="netgescon-tab-content active">
            @yield('tab-dati-generali')
        </div>
        <div id="dettagli" class="netgescon-tab-content">
            @yield('tab-dettagli') 
        </div>
        <div id="documenti" class="netgescon-tab-content">
            @yield('tab-documenti')
        </div>
    </div>
</div>
```

### **Esempio per Fornitore Detail**:
```blade
<nav class="-mb-px flex space-x-8" aria-label="Tabs" role="tablist">
    <button class="netgescon-tab-btn active" data-tab="anagrafica" type="button" role="tab">
        <i class="fas fa-user mr-2"></i> Anagrafica
    </button>
    <button class="netgescon-tab-btn" data-tab="contatti" type="button" role="tab">
        <i class="fas fa-phone mr-2"></i> Contatti
    </button>
    <button class="netgescon-tab-btn" data-tab="documenti" type="button" role="tab">
        <i class="fas fa-file mr-2"></i> Documenti
    </button>
    <button class="netgescon-tab-btn" data-tab="fatture" type="button" role="tab">
        <i class="fas fa-euro-sign mr-2"></i> Fatture
    </button>
</nav>
```

---

## 💡 **ICONE STANDARD PER MODULI**

### **Mapping Icone Consistency**:
```php
$moduleIcons = [
    // Azioni Base
    'list' => 'fas fa-list',
    'create' => 'fas fa-plus', 
    'edit' => 'fas fa-edit',
    'show' => 'fas fa-eye',
    'delete' => 'fas fa-trash',
    
    // Funzioni
    'reports' => 'fas fa-chart-bar',
    'config' => 'fas fa-cog',
    'export' => 'fas fa-download',
    'import' => 'fas fa-upload',
    'search' => 'fas fa-search',
    'filter' => 'fas fa-filter',
    'print' => 'fas fa-print',
    
    // Moduli Specifici
    'fornitori' => 'fas fa-truck',
    'contabilita' => 'fas fa-calculator',
    'stabili' => 'fas fa-building',
    'gestioni' => 'fas fa-calendar',
    'documenti' => 'fas fa-file',
    'anagrafica' => 'fas fa-user',
    'fatture' => 'fas fa-euro-sign',
    'categorie' => 'fas fa-tags',
    
    // Stati
    'attivo' => 'fas fa-check-circle',
    'inattivo' => 'fas fa-times-circle',
    'pending' => 'fas fa-clock',
    'warning' => 'fas fa-exclamation-triangle',
    'info' => 'fas fa-info-circle'
];
```

---

## 🎨 **ACTIVE STATE MANAGEMENT**

### **Per Menu Principale (AdminLTE)**:
```blade
<!-- Active tab basato su route corrente -->
<li class="nav-item">
    <a class="nav-link {{ request()->routeIs('admin.fornitori.index') ? 'active' : '' }}" 
       href="{{ route('admin.fornitori.index') }}"
       role="tab">
        <i class="fas fa-list"></i> Lista Fornitori
    </a>
</li>
```

### **Per Sub-Menu Detail (NetGescon)**:
```javascript
// JavaScript per tab switching (incluso in 05-css-javascript.md)
document.querySelectorAll('.netgescon-tab-btn').forEach(button => {
    button.addEventListener('click', function() {
        // Remove active from all
        document.querySelectorAll('.netgescon-tab-btn').forEach(btn => 
            btn.classList.remove('active')
        );
        document.querySelectorAll('.netgescon-tab-content').forEach(content => 
            content.classList.remove('active')
        );
        
        // Add active to clicked
        this.classList.add('active');
        document.getElementById(this.dataset.tab).classList.add('active');
    });
});
```

---

## 📋 **TEMPLATE CONFIGURABILI**

### **Menu Standard 4 Tabs**:
```blade
@section('menu-tabs')
<li class="nav-item">
    <a class="nav-link active" href="{{ route('admin.MODULO.index') }}">
        <i class="fas fa-list"></i> Lista
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.create') }}">
        <i class="fas fa-plus"></i> Nuovo
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.reports') }}">
        <i class="fas fa-chart-bar"></i> Reports
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.config') }}">
        <i class="fas fa-cog"></i> Config
    </a>
</li>
@endsection
```

### **Menu Esteso 6 Tabs**:
```blade
@section('menu-tabs')
<li class="nav-item">
    <a class="nav-link active" href="{{ route('admin.MODULO.index') }}">
        <i class="fas fa-list"></i> Lista
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.create') }}">
        <i class="fas fa-plus"></i> Nuovo
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.categorie') }}">
        <i class="fas fa-tags"></i> Categorie
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.archivio') }}">
        <i class="fas fa-archive"></i> Archivio
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.reports') }}">
        <i class="fas fa-chart-bar"></i> Reports
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('admin.MODULO.config') }}">
        <i class="fas fa-cog"></i> Config
    </a>
</li>
@endsection
```

---

## 🚀 **IMPLEMENTAZIONE VELOCE**

### **Step by Step**:
1. **Copia template** menu dal pattern scelto
2. **Sostituisci MODULO** con nome del modulo
3. **Personalizza icone** in base alla funzione
4. **Configura routes** corrispondenti
5. **Testa navigazione** tra i tabs
6. **Applica CSS** (vedi file 05-css-javascript.md)

### **Routes da Creare**:
```php
// routes/admin.php
Route::prefix('admin')->name('admin.')->group(function () {
    Route::resource('modulo', 'ModuloController');
    Route::get('modulo/reports', ['ModuloController', 'reports'])->name('modulo.reports');
    Route::get('modulo/config', ['ModuloController', 'config'])->name('modulo.config');
});
```

---

**📖 Prossimo file: `03-cards-statistiche.md`**