[UX Enhancement] Improve sidebar alphabet selection and navigation

[bruteF04C3]

Selecting an alphabet from the sidebar scrolls the page to the relevant articles, but the current implementation lacks two key usability features:

• No active state - The selected alphabet in the sidebar is not visually marked as active, leaving users uncertain which filter is applied.
• No clear section boundaries - Even after selecting a specific letter (e.g., "J"), articles starting with the previous letter ("I") remain visible above the scroll target, making it hard to distinguish where the selected letter's articles begin

Current Behavior

• Clicking a letter in the sidebar scrolls to articles that start with that letter.
• The sidebar shows no visual indication of the active letter.
• The main content area has no explicit section headers for each letter, so scrolling to a letter does not provide a clear visual anchor or separation

Expected Behavior

• The selected alphabet in the sidebar should have a distinct active style (e.g., highlighted background, bold text, or a different color).
• Each alphabet group in the main content area should be clearly separated by a section heading (e.g., A, B, …).
• When a letter is selected from the sidebar, the page should scroll smoothly to that letter’s section heading so that only relevant articles (and the heading itself) are visible, with no trailing articles from the previous letter.

Proposed Solution

Sidebar active state

• When a letter is selected, apply an active class (or similar) to the corresponding sidebar item.
• Ensure the visual distinction is obvious and consistent with the design system.

Section headings in main area

• Wrap articles under each letter with a dedicated section heading (e.g., A).
• Style these headings to clearly separate letter groups (adequate spacing, perhaps a divider or sticky positioning).

Scroll target update

• Modify the sidebar click handler to scroll to the section heading’s id instead of the first article, so the heading becomes the top anchor point.
• This ensures only the selected letter’s heading and its articles are visible, eliminating the bleed of previous-letter content.

[bruteF04C3]

@davidsonfellipe - I'm happy to assign this to myself and work on the same if this seems like a meaningful addition to the website.

PS: I'm aware that this repo doesn't house the codebase for the website but I still feel it's relevant to raise it here. Thank you !