feat(docs): improve sidebar and navbar UX

Disable autoCollapseCategories to prevent unwanted collapsing when
clicking an active category header twice.

Add hideOnScroll to navbar for more reading space on long pages.

Add category link targets in both sidebars so category headers are
clickable and navigate to the section overview page.

Impact: Sidebar navigation no longer collapses unexpectedly.
Category titles are now direct navigation links. Navbar hides while
scrolling, giving more screen space for content.
This commit is contained in:
Julian Pawlowski 2026-04-11 11:20:10 +00:00
parent c610dbe1a3
commit 1db86d1766
4 changed files with 18 additions and 2 deletions

View file

@ -135,10 +135,11 @@ const config: Config = {
docs: {
sidebar: {
hideable: true,
autoCollapseCategories: true,
autoCollapseCategories: false,
},
},
navbar: {
hideOnScroll: true,
title: 'Tibber Prices HA',
logo: {
alt: 'Tibber Prices Integration Logo',

View file

@ -18,6 +18,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🏗️ Architecture',
link: { type: 'doc', id: 'architecture' },
items: ['architecture', 'timer-architecture', 'caching-strategy', 'api-reference'],
collapsible: true,
collapsed: false,
@ -25,6 +26,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '💻 Development',
link: { type: 'doc', id: 'setup' },
items: ['setup', 'coding-guidelines', 'critical-patterns', 'repairs-system', 'debugging'],
collapsible: true,
collapsed: false,
@ -32,6 +34,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '📐 Advanced Topics',
link: { type: 'doc', id: 'period-calculation-theory' },
items: ['period-calculation-theory', 'refactoring-guide', 'performance', 'recorder-optimization'],
collapsible: true,
collapsed: false,
@ -39,6 +42,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '📝 Contributing',
link: { type: 'doc', id: 'contributing' },
items: ['contributing'],
collapsible: true,
collapsed: false,
@ -46,6 +50,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🚀 Release',
link: { type: 'doc', id: 'release-management' },
items: ['release-management', 'testing'],
collapsible: true,
collapsed: false,

View file

@ -135,10 +135,11 @@ const config: Config = {
docs: {
sidebar: {
hideable: true,
autoCollapseCategories: true,
autoCollapseCategories: false,
},
},
navbar: {
hideOnScroll: true,
title: 'Tibber Prices HA',
logo: {
alt: 'Tibber Prices Integration Logo',

View file

@ -18,6 +18,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🚀 Getting Started',
link: { type: 'doc', id: 'installation' },
items: ['installation', 'configuration'],
collapsible: true,
collapsed: false,
@ -25,6 +26,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '📖 Core Concepts',
link: { type: 'doc', id: 'concepts' },
items: ['concepts', 'glossary'],
collapsible: true,
collapsed: false,
@ -32,6 +34,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '📊 Sensors',
link: { type: 'doc', id: 'sensors-overview' },
items: [
'sensors-overview',
'sensors-average',
@ -47,6 +50,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '⏰ Price Periods',
link: { type: 'doc', id: 'period-calculation' },
items: ['period-calculation', 'period-relaxation'],
collapsible: true,
collapsed: false,
@ -54,6 +58,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🎨 Dashboards & Charts',
link: { type: 'doc', id: 'dashboard-examples' },
items: ['dynamic-icons', 'icon-colors', 'dashboard-examples', 'chart-examples'],
collapsible: true,
collapsed: false,
@ -61,6 +66,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🤖 Automations',
link: { type: 'doc', id: 'automation-examples' },
items: ['automation-examples'],
collapsible: true,
collapsed: false,
@ -68,6 +74,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '📖 Reference',
link: { type: 'doc', id: 'sensor-reference' },
items: ['sensor-reference', 'actions'],
collapsible: true,
collapsed: false,
@ -75,6 +82,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '👥 Community',
link: { type: 'doc', id: 'community-examples' },
items: ['community-examples'],
collapsible: true,
collapsed: false,
@ -82,6 +90,7 @@ const sidebars: SidebarsConfig = {
{
type: 'category',
label: '🔧 Help & Support',
link: { type: 'doc', id: 'faq' },
items: ['faq', 'troubleshooting'],
collapsible: true,
collapsed: false,