Article Sidebar & TOC

The article sidebar is a 280px sticky column that accompanies long-form content on the tinnitus information site. It combines two blocks — a CTA Compact for conversion and a Table of Contents for navigation — stacked with 24px spacing. On mobile, the sidebar reorders above the article content.

This component uses naluma design system tokens (Plus Jakarta Sans font, warm earth palette).

BEM class: .tinnitus-article-columns__sidebar

---

Sidebar Container

Property	Value
Width	280px (fixed on desktop/tablet)
Layout	flex column
Gap	24px
Position	sticky, top offset from header height
Mobile	Full width, order: -1 (moves above content)

---

Table of Contents (.tinnitus-toc)

Property	Value
Background	#FBFAF1 — --semantic-color-surface-primary
Border radius	8px
Padding	20px

Heading (__heading)

Property	Value
Text	”On this page”
Font size	14px
Font weight	600
Color	#3D2E2A — --semantic-color-text-primary

Link (__link)

Property	State	Value
Font size	All	14px
Font weight	Default	400
Font weight	Active	600
Color	Default	#7A6560 — --semantic-color-text-secondary
Color	Active	#A55838 — --semantic-color-action-primary

Active indicator (__item--active)

Property	Value
Left border	3px solid #A55838 — --semantic-color-action-primary
Left padding	12px

---

Scroll-spy Behavior

The TOC uses JavaScript scroll-spy to highlight the currently visible section:

1. On page load, scan all h2 and h3 headings in the article content
2. Generate the TOC link list dynamically
3. On scroll, use IntersectionObserver to detect which heading is in view
4. Apply __item--active modifier to the corresponding TOC item
5. On mobile, the TOC collapses behind a toggle button

---

Showcase

Full sidebar (280px)

Stay informed

Get the latest tinnitus research delivered to your inbox.

Subscribe

On this page

• What is tinnitus?
• Causes and risk factors
• Cognitive behavioral therapy
• Sound therapy options
• When to see a specialist

TOC — active state detail

On this page

• Introduction
• Key findings
• Methodology
• Conclusions

In article layout context

Understanding Tinnitus: A Comprehensive Guide

Tinnitus is the perception of sound when no external sound source is present. It is commonly described as ringing, buzzing, hissing, or humming in the ears. While not a disease itself, tinnitus is a symptom that can arise from various underlying conditions.

Research suggests that approximately 15-20% of the population experiences some form of tinnitus, with about 2% finding it significantly distressing. Understanding the mechanisms behind tinnitus is the first step toward effective management.

Stay informed

Get research updates in your inbox.

Subscribe

On this page

• What is tinnitus?
• Causes
• Treatment

---

Usage Guidelines

• CTA always appears above the TOC. The CTA is the primary conversion element; the TOC is a navigation aid. This order ensures the CTA is seen first.
• TOC is generated from article headings. Do not hardcode TOC links — they should be generated dynamically from the article’s h2/h3 structure via JavaScript.
• Sticky positioning starts below the header. The sidebar’s top value should account for the header height (64px desktop, 58px mobile) plus some breathing room.
• Mobile reorder, not hide. On mobile viewports, the sidebar moves above the article content rather than disappearing. The TOC collapses to save vertical space.