317 lines
8.6 KiB
Markdown
317 lines
8.6 KiB
Markdown
# 🗂️ 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`**
|