HeatMapXHeatMapX
मूल्यLog in

Persistent Left Sidebar और Multi-Page Dashboard Layout

HeatMapX Engineering Team6 min read
  • dashboard
  • navigation

2026-06-05 को, हमने heatmapx.com/dashboard को पूरे Supabase/Vercel-style persistent sidebar layout के साथ rebuild किया (उसी दिन ship किए गए full dashboard redesign का structural follow-up)।

नया Layout

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Sites / Today's Events / Plan       │
│   ⌘ CLI&Skills│                                       │
│   $ Plan&Billing│  AI Analysis Usage [████░]          │
│   ⚙ Settings  │   PV Usage         [██░░░]            │
│               │                                       │
│ COMING SOON   │   Quick Actions                       │
│   🧪 A/B Tests │   [▤ View Heatmaps] [＋Add]          │
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Log out     │                                       │
└──────────────┴───────────────────────────────────────┘

पाँच Dedicated Pages

Route Page Content
/dashboard ⌂ Home Stats cards (sites / today's events / current plan), usage bars (AI analyses / PV), quick actions
/dashboard/sites ▤ Heatmaps Registered sites की tabular list। यहाँ से नई sites add करें
/dashboard/cli ⌘ CLI & Skills Terminal CLI और Claude Code Skill के लिए side-by-side installation guides
/dashboard/billing $ Plan & Billing Current usage summary + full plan comparison table (Free / Pro / Team / Enterprise)
/dashboard/settings ⚙ Settings Language selector (English / 日本語) — और settings जल्द आ रही हैं

क्या बदला

▤ Supabase-style persistent left sidebar

सभी पाँच primary navigation items हमेशा left sidebar में visible हैं, scroll पर fixed रहते हैं ताकि आप कहीं से भी pages के बीच jump कर सकें।

  • Active page highlight: current page menu में visually emphasize होती है
  • Icons: हर menu item का एक visual identifier है
  • Log out: sidebar के bottom पर pinned, accidental clicks का risk कम करता है

⌂ Home एक at-a-glance overview के रूप में

/dashboard — login के बाद पहली screen — को अब design किया गया है कि एक ही view में आपके account status की complete picture मिले।

  • Site count, today's event total, और current plan दिखाने वाले stats cards
  • AI analysis usage और monthly PV के लिए progress bars (80% से ऊपर amber, 100% से ऊपर red)
  • Quick actions: "View Heatmaps", "Add Site", "Upgrade", और "CLI Setup"

⌘ CLI & Skills side by side

HeatMapX उपयोग करने के दोनों तरीके — terminal CLI और Claude Code Skill — एक ही page पर two-column layout में documented हैं।

  • CLI: npm install -g heatmapx से heatmapx analyze तक step-by-step
  • Claude Code Skill: /plugin install heatmapx-skill@xtv-llc/heatmapx-cli से install करें और conversation से सीधे HeatMapX call करें
  • Sample commands English और Japanese दोनों में दिखाए गए हैं

$ पूरा Plan Comparison built in

Plan & Billing page में अब complete Free / Pro / Team / Enterprise comparison table है ताकि आप dashboard छोड़े बिना options review कर सकें और upgrade कर सकें।

  • Monthly / annual toggle (annual default; annual billing पर monthly के मुकाबले काफी discount मिलता है)। Current pricing के लिए, pricing page देखें
  • आपका current plan green "Current" badge से marked है
  • Pro को recommended option के रूप में orange में highlight किया गया है
  • Enterprise heatmapx@xtv.co.jp पर direct contact के लिए link करता है

⚙ Settings में Language selection

Language switching पहले केवल header में two-state toggle के रूप में available था। अब Settings में एक explicit radio selector के रूप में भी exposed है। Changes instantly apply होते हैं और browser में persisted होते हैं।

Coming Soon

Sidebar के bottom पर एक "Coming Soon" section upcoming releases में आने वाले features surface करता है:

Feature Description
🧪 A/B Tests Heatmap insights के आधार पर copy और layout changes के लिए one-click A/B testing
✨ Dynamic UI Personalization engine जो user attributes और behavior patterns के आधार पर UI adapt करता है

अन्य सुधार

  • Sticky header: logo, theme switcher, और language toggle scroll करते समय visible रहते हैं
  • Sticky sidebar: navigation page content scroll करते समय हमेशा accessible रहता है
  • Log out relocated: header के top-right से sidebar के bottom में move किया गया (important but low-frequency action नीचे push किया)
  • Backward compatible: existing /dashboard bookmarks नए Home screen पर land करते हैं — कोई redirect नहीं चाहिए

Impact का दायरा

यह release केवल UI/UX है — tracking logic, data structures, और APIs unchanged हैं। Existing embedded tracker tags पहले की तरह काम करते रहते हैं। Existing /dashboard bookmarks के लिए कोई redirect ज़रूरी नहीं है।

Claude Code से चलने वाले हीटमैप — मुफ़्त शुरू करें।

एक ट्रैकर टैग चिपकाएँ, CLI से विश्लेषण और CRO सुझाव पाएँ।

मुफ़्त शुरू करेंयोजनाएँ देखें