feat: add sticky left sidebar navigation to tutorial page

- New .doc-sidebar CSS class (reusable for other pages)
- Tutorial TOC moved from top grid to sticky left panel
- Mobile: collapses to horizontal scroll bar
- Sections always accessible while scrolling

Author: xiaoyunchong.xyc

style.css

@@ -1412,3 +1412,93 @@ footer a:hover {
         padding: 28px 16px;
     }
 }
+
+/* Doc sidebar layout - for tutorial, training, etc */
+.doc-layout {
+    display: flex;
+    gap: 0;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.doc-sidebar {
+    position: sticky;
+    top: 60px;
+    width: 240px;
+    min-width: 240px;
+    height: calc(100vh - 60px);
+    overflow-y: auto;
+    border-right: 1px solid var(--line);
+    background: var(--surface-2);
+    padding: 20px 0;
+    font-size: 0.84rem;
+}
+
+.doc-sidebar a {
+    display: block;
+    padding: 7px 20px;
+    color: var(--muted);
+    text-decoration: none;
+    border-left: 3px solid transparent;
+    transition: all 0.15s;
+}
+
+.doc-sidebar a:hover {
+    color: var(--primary);
+    background: rgba(37, 99, 235, 0.04);
+}
+
+.doc-sidebar a.active {
+    color: var(--primary);
+    border-left-color: var(--primary);
+    background: rgba(37, 99, 235, 0.06);
+    font-weight: 600;
+}
+
+.doc-sidebar .sb-title {
+    padding: 7px 20px;
+    font-weight: 700;
+    color: var(--ink);
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 12px;
+}
+
+.doc-content {
+    flex: 1;
+    min-width: 0;
+    padding: 32px 40px;
+    max-width: 820px;
+}
+
+@media (max-width: 900px) {
+    .doc-layout {
+        flex-direction: column;
+    }
+    .doc-sidebar {
+        position: static;
+        width: 100%;
+        min-width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--line);
+        display: flex;
+        flex-wrap: wrap;
+        padding: 12px;
+        gap: 4px;
+    }
+    .doc-sidebar a {
+        padding: 6px 12px;
+        border-left: none;
+        border-radius: 6px;
+        background: var(--surface);
+        border: 1px solid var(--line);
+    }
+    .doc-sidebar .sb-title {
+        width: 100%;
+    }
+    .doc-content {
+        padding: 24px;
+    }
+}

tutorial.html

@@ -20,25 +20,30 @@
 <a href="https://github.com/modelscope/FunASR" class="nav-github">GitHub</a>
 </div></nav>
 
-<div class="content"><div class="container narrow">
-<h1>Tutorial</h1>
-<p>From zero to production — learn FunASR in 10 minutes.</p>
-
-<div class="toc-grid">
+<div class="doc-layout">
+<nav class="doc-sidebar">
+<div class="sb-title">Tutorial</div>
 <a href="#quick">30-Second Demo</a>
 <a href="#install">Install</a>
 <a href="#choose">Choose a Model</a>
-<a href="#scenarios">Usage Scenarios</a>
+<div class="sb-title">Usage</div>
+<a href="#scenarios">Scenarios</a>
 <a href="#offline">Offline ASR</a>
 <a href="#streaming">Streaming ASR</a>
 <a href="#spk">Speaker Diarization</a>
 <a href="#emotion">Emotion Detection</a>
 <a href="#vad">VAD</a>
 <a href="#punc">Punctuation</a>
 <a href="#export">ONNX Export</a>
-<a href="#config">Configuration Reference</a>
-<a href="#faq">FAQ & Troubleshooting</a>
-</div>
+<div class="sb-title">Reference</div>
+<a href="#config">Configuration</a>
+<a href="#faq">FAQ</a>
+</nav>
+<div class="doc-content">
+<h1>Tutorial</h1>
+<p>From zero to production — learn FunASR in 10 minutes.</p>
+
+
 
 <!-- 30-Second Demo -->
 <h2 id="quick">30-Second Demo</h2>
@@ -488,7 +493,8 @@ <h4>GPU not being used?</h4>
 # Specify GPU explicitly:
 model = AutoModel(model="...", device="cuda:0")</pre>
 
-</div></div>
+</div><!-- doc-content -->
+</div><!-- doc-layout -->
 
 <footer>
 <p>FunASR &middot; Tongyi Lab, Alibaba Group</p>