Componente di navigazione modulare e personalizzabile per il progetto **Italia Non Profit** (Open Terzo Settore).
npm install @open-terzo-settore/inp-navigationComponente di navigazione modulare e personalizzabile per il progetto Italia Non Profit (Open Terzo Settore).
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
- β
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
``bash`
npm install @open-terzo-settore/inp-navigation
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)src/index.twig
- Usa il template per l'anteprimaBASE_URL=https://italianonprofit.it
- Usa di default
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.
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.
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 minimizzatoindex.html
- - HTML compilato dal template Twigimages/
- - Risorse immagini ottimizzatesrc/menu.twig
- Usa il template per la produzioneBASE_URL=https://italianonprofit.it
- Usa di default
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.
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.
Al momento non ci sono test configurati.
`bash`
npm testOutput: Error: no test specified
``
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
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"
}
]
}
]
}
]
}
- label: Testo visualizzato nel menu
- link: URL di destinazione
- style: Tipo di layout (tabs, list, cards)_blank
- 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 (, _self)
- className: Classe CSS personalizzata
- wrapperClassName: Classe CSS per il contenitore
Puoi personalizzare i colori e gli stili modificando le variabili in src/styles/_variables.scss.
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...
- 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
Il pacchetto viene esportato come modulo ESM (ECMAScript Module), rendendolo compatibile con:
- Import ES6 (import)
- Vite/Nuxt
- Webpack 5+ con supporto ESM
`html`
`javascript
// CommonJS
const inpNavigation = require('@open-terzo-settore/inp-navigation');
// ES6
import inpNavigation from '@open-terzo-settore/inp-navigation';
`
Il progetto supporta le variabili d'ambiente tramite un file .env o variabili di sistema:
- 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"
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:
`bashSviluppo con URL personalizzato
BASE_URL=https://staging.italianonprofit.it npm run dev
$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`)Consulta il file CHANGELOG.md per la lista completa delle modifiche tra le versioni.
ISC
- Italia Non Profit
- Granter
- ForNonProfit
- Mappa del Non Profit
Per domande o supporto, contatta: simone@italianonprofit.it
---
Versione Attuale: 1.14.0