INP Navigation

Componente di navigazione modulare e personalizzabile per il progetto Italia Non Profit (Open Terzo Settore).

📋 Descrizione

Questo pacchetto fornisce un sistema di navigazione completo e responsive per il portale Italia Non Profit. Il menu è configurabile tramite un file JSON e supporta diverse tipologie di layout:

- Menu a tabs - Per la navigazione principale
- Menu a liste - Per sottomenu strutturati
- Menu a cards - Per mostrare servizi e piattaforme
- Mega menu - Per menu complessi con griglie e liste
- Menu dropdown - Per navigazione gerarchica

🚀 Caratteristiche

- ✅ Completamente configurabile tramite JSON
- ✅ Design responsive e mobile-first
- ✅ Template Twig per la generazione HTML
- ✅ Stili SCSS modulari e temi personalizzabili
- ✅ Icone RemixIcon integrate
- ✅ Build ottimizzato con Webpack 5
- ✅ Supporto per ambiente di sviluppo con hot-reload
- ✅ Esportabile come modulo UMD (utilizzabile in diversi ambienti)
- ✅ CSS ottimizzato con PurgeCSS

📦 Installazione

``bash
npm install @open-terzo-settore/inp-navigation
`

🛠 Script NPM

$3

Avvia il server di sviluppo con hot-reload.

`bash
npm run dev
`

Questo comando:
- Avvia Webpack Dev Server in modalità development
- Abilita il live reload per vedere i cambiamenti in tempo reale
- Serve l'applicazione su http://localhost:8080 (porta predefinita)
- Usa il template src/index.twig per l'anteprima
- Usa BASE_URL=https://italianonprofit.it di default

$3

Avvia il server di sviluppo con URL di staging.

`bash
npm run dev:staging
`

Equivalente a npm run dev ma con BASE_URL=https://staging.italianonprofit.it.

$3

Avvia il server di sviluppo con URL locale.

`bash
npm run dev:local
`

Equivalente a npm run dev ma con BASE_URL=http://localhost:3000.

$3

Crea la build di produzione ottimizzata.

`bash
npm run build
`

Questo comando:
- Compila il progetto in modalità production
- Minimizza CSS e JavaScript
- Applica PurgeCSS per rimuovere CSS non utilizzato
- Genera i file nella cartella dist/:
- main.js - JavaScript bundle ottimizzato (ESM module)
- style.css - CSS ottimizzato e minimizzato
- index.html - HTML compilato dal template Twig
- images/ - Risorse immagini ottimizzate
- Usa il template src/menu.twig per la produzione
- Usa BASE_URL=https://italianonprofit.it di default

$3

Crea la build di produzione con URL di staging.

`bash
npm run build:staging
`

Equivalente a npm run build ma con BASE_URL=https://staging.italianonprofit.it.

$3

Esegue il processo completo di release.

`bash
npm run release
`

Questo comando:
- Esegue la build di produzione
- Genera/aggiorna il file CHANGELOG.md con le modifiche
- Crea una nuova versione minor
- Effettua il commit delle modifiche
- Publica su npm
- Effettua il push su GitHub

⚠️ Nota: Questo comando richiede le autorizzazioni appropriate per pubblicare su npm e push su GitHub.

$3

Al momento non ci sono test configurati.

`bash
npm test


Output: Error: no test specified


`

📁 Struttura del Progetto

`
inp-menu/
├── src/
│ ├── app.js # Entry point JavaScript
│ ├── index.html # HTML di sviluppo
│ ├── index.twig # Template Twig per sviluppo
│ ├── menu.twig # Template Twig per produzione
│ ├── menu.json # Configurazione del menu
│ ├── menu.scss # Stili principali
│ ├── scripts/
│ │ ├── navigation.js # Logica di navigazione
│ │ └── utils.js # Funzioni di utilità
│ ├── styles/
│ │ ├── _variables.scss # Variabili SCSS
│ │ ├── _mixins.scss # Mixin riutilizzabili
│ │ ├── _navigation.*.scss # Stili dei componenti di navigazione
│ │ ├── _buttons.scss # Stili pulsanti
│ │ ├── _typography.scss # Tipografia
│ │ ├── _utilities.scss # Classi di utilità
│ │ └── skins/ # Temi e varianti visuali
│ └── images/
│ ├── *.svg # Loghi e icone del progetto
│ └── remixicon/ # Libreria completa RemixIcon
├── dist/ # File compilati (generati automaticamente)
├── webpack.config.js # Configurazione Webpack
├── package.json # Dipendenze e script
├── CHANGELOG.md # Storia delle versioni
└── README.md # Questo file
`

⚙️ Configurazione del Menu

Il menu è configurato tramite il file src/menu.json. Esempio di struttura:

`json
{
"mainMenu": [
{
"label": "Voce Menu",
"style": "tabs",
"groups": [
{
"label": "Gruppo",
"style": "list",
"child": [
{
"label": "Sottomenu",
"link": "/percorso",
"icon": "nome-icona",
"iconPath": "remixicon/Category"
}
]
}
]
}
]
}
`

$3

- label: Testo visualizzato nel menu
- link: URL di destinazione
- style: Tipo di layout (tabs, list, cards)
- groups: Gruppi di voci di menu
- child: Voci di menu figlie
- icon: Nome dell'icona RemixIcon
- iconPath: Percorso della categoria icona
- image: Percorso immagine personalizzata
- description: Descrizione per le card
- cta: Testo del call-to-action
- target: Target del link (_blank, _self)
- className: Classe CSS personalizzata
- wrapperClassName: Classe CSS per il contenitore

🎨 Personalizzazione Stili

$3

Puoi personalizzare i colori e gli stili modificando le variabili in src/styles/_variables.scss.

$3

I temi predefiniti sono disponibili in src/styles/skins/:
- _navigation.dark.scss - Tema scuro
- _navigation.colored.scss - Tema colorato
- _navigation.gradient.scss - Tema con gradiente
- _navigation.border.*.scss - Varianti con bordi
- E altri...

🔧 Tecnologie Utilizzate

- Webpack 5 - Module bundler
- Twig - Template engine
- SCSS/Sass - Pre-processore CSS
- ESBuild - JavaScript/TypeScript compiler (veloce)
- PurgeCSS - Rimozione CSS non utilizzato
- RemixIcon - Libreria icone
- Changelogen - Generazione automatica changelog

📦 Output del Build

Il pacchetto viene esportato come modulo ESM (ECMAScript Module), rendendolo compatibile con:
- Import ES6 (import)
- Vite/Nuxt
- Webpack 5+ con supporto ESM

$3

`html



`

$3

`javascript
// CommonJS
const inpNavigation = require('@open-terzo-settore/inp-navigation');

// ES6
import inpNavigation from '@open-terzo-settore/inp-navigation';
`

🔐 Variabili d'Ambiente

Il progetto supporta le variabili d'ambiente tramite un file .env o variabili di sistema:

$3

- BASE_URL: URL base per i link del sito (default: https://italianonprofit.it)
- Usato per tutti i link relativi nel menu
- Sostituisce gli URL hardcoded nel template Twig

- DASHBOARD_URL: URL base per i link alla dashboard (default: https://dashboard.italianonprofit.it)
- Usato per i link "Accedi", "Iscriviti" e "Area Riservata"

$3

Crea un file .env nella root del progetto:

`env
BASE_URL=https://italianonprofit.it
DASHBOARD_URL=https://dashboard.italianonprofit.it
`

Oppure passa le variabili direttamente nei comandi:

`bash


Sviluppo con URL personalizzato

BASE_URL=https://staging.italianonprofit.it npm run dev

Build con URL personalizzato

BASE_URL=https://staging.italianonprofit.it npm run build
`

$3

Quando il pacchetto viene utilizzato in altri progetti (es. Nuxt), gli URL possono essere sostituiti a runtime tramite le variabili d'ambiente del progetto consumatore. Il componente Menu.vue nel progetto maurizio mostra un esempio di come sostituire gli URL a runtime.

👥 Contribuire

Per contribuire al progetto:

1. Fai un fork del repository
2. Crea un branch per la tua feature (git checkout -b feature/AmazingFeature)
3. Committa le modifiche (git commit -m 'Add some AmazingFeature')
4. Pusha sul branch (git push origin feature/AmazingFeature`)
5. Apri una Pull Request

📝 Changelog

Consulta il file CHANGELOG.md per la lista completa delle modifiche tra le versioni.

📄 Licenza

ISC

🔗 Link Utili

- Italia Non Profit
- Granter
- ForNonProfit
- Mappa del Non Profit

📧 Supporto

Per domande o supporto, contatta: simone@italianonprofit.it

---

Versione Attuale: 1.14.0