michele/netgescon-day0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
119f486bb8
netgescon-day0/docs/90-UI-interfaccia-unica/90-01-content/02-pattern-menu.md

8.6 KiB
Raw Blame History

🗂️ 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:

@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:

@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:

<!-- 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:

<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:

$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):

<!-- 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 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:

@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:

@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:

// 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