Restyle and narrow the sidebar, and fix its Japanese labels

[willeastcott]

Restyles the User Manual sidebar and narrows it to the Docusaurus default width. It also translates the section headers on the Japanese site, corrects six Japanese sidebar titles, and makes expanding a category collapse its siblings.

What changed

Section headers (INTRODUCTION, CORE PRODUCTS and so on)

• The orange accent bar is gone. A hairline above each header except the first now separates the groups. The headers keep their dark, bold uppercase text.
• Groups get more space above them. The old .sidebar-section-header:first-of-type rule matched every header, because each sits alone in its <li>, so all five got the first header's smaller 12 px margin and the intended larger gap never applied.
• The headers are translated on the Japanese site. They are type: 'html' sidebar items, which Docusaurus doesn't translate, so a sectionHeader() helper in sidebars.js now picks each label by locale. sidebars.js is reloaded for every locale, and both docusaurus build and docusaurus start set DOCUSAURUS_CURRENT_LOCALE first.

Sidebar density (src/css/custom.scss)

• Labels are 15 px instead of 16 px.
• Chevrons are smaller, and still at least 3:1 against the background.
• Nested lists get a 1 px guide line under the parent label, in the sidebar's border colour (--ifm-toc-border-color).
• The sidebar scrollbar uses a light thumb instead of the classic grey scrollbar Windows draws by default.

Sidebar width (src/css/custom.scss)

• English drops from 310 px to 300 px, the Docusaurus default. The 15 px labels free about 13.5 px on the widest top-level row, "PlayCanvas Web Components" plus its chevron, whatever the system font. So that row still has more room than it has on the live site, with 12 px to spare on Windows, measured with the classic scrollbar.
• Japanese stays at 310 px through html[lang='ja']. Its labels run longer, and at 300 px six more of them would wrap onto a second line.

Japanese sidebar titles (front matter title, which is also each page's heading)

English	Was	Now
The Editor Workflow	PlayCanvasのワークフロー	エディターのワークフロー
Your First App	初めてのPlayCanvasアプリを作る	初めてのアプリ
Building Models	PlayCanvas用の3Dモデル作成	モデルの構築
Exporting Assets	PlayCanvas用の3Dモデルのエクスポート	アセットのエクスポート
Assets - Delete asset	アセット - Create asset	アセット - Delete asset
Controls & Keyboard Shortcuts	キーボードショートカット	操作とキーボードショートカット

The bracketed English UI names (ヒエラルキーパネル (Hierarchy), インスペクターパネル (Inspector), ビューポート (Viewport)) and abbreviations ((PBR), (IBL), (AO)) are unchanged. They look deliberate: the Editor's UI is in English.

Auto-collapse (docusaurus.config.js, in its own commit)

• autoCollapseCategories: true: expanding a category collapses its expanded siblings, at every level.

Why

The orange bars read like a current-page marker and competed with the real current-page highlight. The sidebar also felt heavy: 16 px medium-weight labels, large chevrons and no cue for nesting. With more than 500 entries, it accumulated open categories as you browsed. On the Japanese site the section headers were still in English.

Measuring every label for the width change also showed six Japanese titles that had drifted from their English pages. Four added "PlayCanvas" or "3D models", and one had lost "Controls". The Delete asset page was titled "Create asset", so the Japanese REST API list showed Create asset twice.

Testing

• npm run build succeeds for en and ja with no warnings or broken links
• npm run lint is clean, and npm test passes (52 tests)
• In the built HTML, /ja/user-manual/ has the Japanese headers and the corrected titles, and /user-manual/ has the English headers
• Checked the served build in Chrome in light and dark, on /ja/, and in the mobile drawer. There is a divider above every header except the first, labels are 15 px, and breadcrumbs are unchanged
• Sidebar width: 300 px in English and 310 px in Japanese, with no horizontal overflow at 1440 or 1024 px. "PlayCanvas Web Components" stays on one line with 12 px to spare on Windows
• Measured all 536 sidebar labels in both locales on Windows. No English label that fits on one line at 310 px wraps at 300 px
• Auto-collapse: expanding Physics collapses Graphics, and inside PlayCanvas Editor, expanding Editor Interface collapses Projects

Notes for review

• The Japanese strings need a native speaker's check. Two of the section headers follow existing usage: イントロダクション, and 共通トピック, which the Japanese docs already use for this section. 主要製品, 基盤API and その他のリソース have no precedent. The corrected titles reuse terms already in the Japanese docs: エディター (as in エディター設定), 操作 (as in マウス操作 on the same page), and 構築 (from the models page body).
• I could only measure Windows fonts. Mac and Android system fonts are wider. The width argument for "PlayCanvas Web Components" holds for any font, but whether other labels fit on those platforms is an estimate.
• Auto-collapse changes behaviour, so it is a separate commit and easy to drop.

I confirm I have read the contributing guidelines.

🤖 Generated with Claude Code