Sidebar Sinistra Persistente e Layout Dashboard Multi-Pagina
- dashboard
- navigation
Il 2026-06-05 abbiamo ricostruito heatmapx.com/dashboard con un layout completo a sidebar persistente in stile Supabase/Vercel (un follow-up strutturale al redesign completo del dashboard rilasciato lo stesso giorno).
Nuovo Layout
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ [icon] HeatMapX [โ๐ป๐] [JA/EN] โ โ header sticky
โโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ MENU โ โ
โ โธ โ Home โ Home โ
โ โค Heatmaps โ โ
โ โ Siti / Eventi Oggi / Piano โ
โ โ CLI&Skillsโ โ
โ $ Piano&Fatturaโ Utilizzo Analisi AI [โโโโโ] โ
โ โ Impostaz. โ Utilizzo PV [โโโโโ] โ
โ โ โ
โ COMING SOON โ Azioni Rapide โ
โ ๐งช A/B Tests โ [โค Vedi Heatmaps] [๏ผAggiungi] โ
โ โจ Dynamic UIโ โ
โโโโโโโโโโโโโโโโค โ
โ Disconnetti โ โ
โโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Cinque Pagine Dedicate
| Route | Pagina | Contenuto |
|---|---|---|
/dashboard |
โ Home | Stats card (siti / eventi oggi / piano attuale), barre utilizzo (analisi AI / PV), azioni rapide |
/dashboard/sites |
โค Heatmaps | Lista tabulare dei siti registrati. Aggiungi nuovi siti da qui |
/dashboard/cli |
โ CLI & Skills | Guide di installazione affiancate per la CLI da terminale e la Claude Code Skill |
/dashboard/billing |
$ Piano & Fatturazione | Riepilogo utilizzo attuale + tabella comparativa piani completa (Free / Pro / Team / Enterprise) |
/dashboard/settings |
โ Impostazioni | Selettore lingua (English / ๆฅๆฌ่ช) โ altre impostazioni in arrivo |
Cosa รจ Cambiato
โค Sidebar sinistra persistente in stile Supabase
Tutti e cinque gli elementi di navigazione principali sono sempre visibili nella sidebar sinistra, fissa allo scroll cosรฌ puoi passare tra le pagine da qualsiasi punto.
- Evidenziazione pagina attiva: la pagina corrente รจ visivamente enfatizzata nel menu
- Icone: ogni elemento del menu ha un identificatore visivo
- Disconnetti: ancorato in fondo alla sidebar, riducendo il rischio di click accidentali
โ Home come panoramica a colpo d'occhio
/dashboard โ la prima schermata dopo il login โ รจ ora progettata per darti un quadro completo dello stato del tuo account in un'unica vista.
- Stats card che mostrano conteggio siti, totale eventi di oggi e il tuo piano attuale
- Barre di avanzamento per utilizzo analisi AI e PV mensili (ambra sopra l'80%, rosso sopra il 100%)
- Azioni rapide: "Visualizza Heatmaps", "Aggiungi Sito", "Upgrade" e "Setup CLI"
โ CLI & Skills affiancati
Entrambi i modi di usare HeatMapX โ la CLI da terminale e la Claude Code Skill โ sono documentati su una singola pagina in un layout a due colonne.
- CLI: passo dopo passo da
npm install -g heatmapxfino aheatmapx analyze - Claude Code Skill: installa con
/plugin install heatmapx-skill@xtv-llc/heatmapx-clie richiama HeatMapX direttamente dalla conversazione - Comandi di esempio mostrati sia in inglese che in giapponese
$ Confronto piani completo integrato
La pagina Piano & Fatturazione ora include la tabella comparativa completa Free / Pro / Team / Enterprise cosรฌ puoi esaminare le opzioni e fare upgrade senza lasciare il dashboard.
- Toggle mensile / annuale (annuale predefinito; la fatturazione annuale offre uno sconto significativo rispetto al mensile). Per i prezzi attuali, consulta la pagina prezzi
- Il tuo piano attuale รจ contrassegnato con un badge verde "Attuale"
- Pro รจ evidenziato in arancione come opzione consigliata
- Enterprise rimanda a
info@heatmapx.comper il contatto diretto
โ Selezione lingua nelle Impostazioni
Il cambio lingua era in precedenza disponibile solo come toggle a due stati nell'header. ร ora esposto anche come selettore radio esplicito nelle Impostazioni. Le modifiche vengono applicate istantaneamente e persistono nel browser.
Coming Soon
Una sezione "Coming Soon" in fondo alla sidebar mostra le funzionalitร in arrivo nelle prossime release:
| Funzionalitร | Descrizione |
|---|---|
| ๐งช A/B Tests | Test A/B con un click per modifiche a testi e layout basate sulle analisi heatmap |
| โจ Dynamic UI | Motore di personalizzazione che adatta l'interfaccia in base agli attributi e ai pattern di comportamento degli utenti |
Altri Miglioramenti
- Header sticky: logo, cambio tema e toggle lingua rimangono visibili durante lo scroll
- Sidebar sticky: la navigazione rimane accessibile in qualsiasi momento durante lo scroll del contenuto della pagina
- Logout ricollocato: spostato dall'angolo in alto a destra dell'header al fondo della sidebar (azione importante ma poco frequente portata in basso)
- Retrocompatibile: i segnalibri
/dashboardesistenti atterrano sulla nuova schermata Home โ nessun redirect necessario
Portata dell'Impatto
Questa release รจ solo UI/UX โ la logica di tracciamento, le strutture dati e le API sono invariate. I tracker tag incorporati esistenti continuano a funzionare come prima. Non sono richiesti redirect per i segnalibri /dashboard esistenti.