From 2d75b4429f1e8c265558089859e5b7a04b3469a2 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Thu, 26 Feb 2026 12:50:19 +1100
Subject: [PATCH] feat: add sticky sidebar navigation to Learning Hub index

Add a left sidebar to the Learning Hub index page matching the pattern
already used on individual article pages. The sidebar lists all articles
grouped by section (Fundamentals, Reference, Hands-on) and stays sticky
while scrolling, reducing vertical scroll for the now 10-article list.

Also update ArticleLayout.astro fundamentalsOrder to include the 4 new
articles added in the previous commit.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 website/src/layouts/ArticleLayout.astro    |   8 +-
 website/src/pages/learning-hub/index.astro | 184 +++++++++++++--------
 2 files changed, 118 insertions(+), 74 deletions(-)

diff --git a/website/src/layouts/ArticleLayout.astro b/website/src/layouts/ArticleLayout.astro
index 26493a6c..7aff0ab8 100644
--- a/website/src/layouts/ArticleLayout.astro
+++ b/website/src/layouts/ArticleLayout.astro
@@ -16,11 +16,15 @@ const base = import.meta.env.BASE_URL;
 const articles = await getCollection('learning-hub');
 
 const fundamentalsOrder = [
-  'what-are-agents-prompts-instructions',
+  'what-are-agents-skills-instructions',
   'understanding-copilot-context',
   'copilot-configuration-basics',
   'defining-custom-instructions',
-  'creating-effective-prompts',
+  'creating-effective-skills',
+  'building-custom-agents',
+  'understanding-mcp-servers',
+  'automating-with-hooks',
+  'using-copilot-coding-agent',
   'before-after-customization-examples',
 ];
 
diff --git a/website/src/pages/learning-hub/index.astro b/website/src/pages/learning-hub/index.astro
index 633e5212..87e169fe 100644
--- a/website/src/pages/learning-hub/index.astro
+++ b/website/src/pages/learning-hub/index.astro
@@ -42,81 +42,121 @@ const reference = articles
 
     <div class="page-content">
       <div class="container">
-        <section class="learning-hub-section">
-          <h2>Fundamentals</h2>
-          <p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
-          <div class="article-list">
-            {fundamentals.map((article, index) => (
-              <a href={`${base}learning-hub/${article.id}/`} class="article-card">
-                <div class="article-number" aria-hidden="true">{index + 1}</div>
-                <div class="article-info">
-                  <h3>{article.data.title}</h3>
-                  <p>{article.data.description}</p>
-                  <div class="article-meta">
-                    {article.data.estimatedReadingTime && (
-                      <span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
-                    )}
-                    {article.data.tags && article.data.tags.length > 0 && (
-                      <span class="meta-item">
-                        {article.data.tags.map((tag) => (
-                          <span class="tag">{tag}</span>
-                        ))}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </a>
-            ))}
-          </div>
-        </section>
+        <div class="learning-hub-layout">
+          <nav class="learning-hub-sidebar" aria-label="Learning Hub sections">
+            <div class="sidebar-section">
+              <h3>Fundamentals</h3>
+              <ol class="sidebar-nav-list">
+                {fundamentals.map((article) => (
+                  <li>
+                    <a href={`${base}learning-hub/${article.id}/`}>
+                      {article.data.title}
+                    </a>
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div class="sidebar-section">
+              <h3>Reference</h3>
+              <ul class="sidebar-nav-list">
+                {reference.map((article) => (
+                  <li>
+                    <a href={`${base}learning-hub/${article.id}/`}>
+                      {article.data.title}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div class="sidebar-section">
+              <h3>Hands-on</h3>
+              <ul class="sidebar-nav-list">
+                <li>
+                  <a href={`${base}learning-hub/cookbook/`}>Cookbook</a>
+                </li>
+              </ul>
+            </div>
+          </nav>
 
-        <section class="learning-hub-section">
-          <h2>Reference</h2>
-          <p class="section-description">Quick-lookup resources to keep handy while you work.</p>
-          <div class="article-list">
-            {reference.map((article) => (
-              <a href={`${base}learning-hub/${article.id}/`} class="article-card">
-                <div class="article-number" aria-hidden="true">📖</div>
-                <div class="article-info">
-                  <h3>{article.data.title}</h3>
-                  <p>{article.data.description}</p>
-                  <div class="article-meta">
-                    {article.data.estimatedReadingTime && (
-                      <span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
-                    )}
-                    {article.data.tags && article.data.tags.length > 0 && (
-                      <span class="meta-item">
-                        {article.data.tags.map((tag) => (
-                          <span class="tag">{tag}</span>
-                        ))}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </a>
-            ))}
-          </div>
-        </section>
-        <section class="learning-hub-section">
-          <h2>Hands-on</h2>
-          <p class="section-description">Interactive samples and recipes to learn by doing.</p>
-          <div class="article-list">
-            <a href={`${base}learning-hub/cookbook/`} class="article-card">
-              <div class="article-number" aria-hidden="true">🍳</div>
-              <div class="article-info">
-                <h3>Cookbook</h3>
-                <p>Code samples, recipes, and examples for building with GitHub Copilot tools</p>
-                <div class="article-meta">
-                  <span class="meta-item">
-                    <span class="tag">samples</span>
-                    <span class="tag">recipes</span>
-                    <span class="tag">sdk</span>
-                  </span>
-                </div>
+          <div class="learning-hub-index-content">
+            <section class="learning-hub-section" id="fundamentals">
+              <h2>Fundamentals</h2>
+              <p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
+              <div class="article-list">
+                {fundamentals.map((article, index) => (
+                  <a href={`${base}learning-hub/${article.id}/`} class="article-card">
+                    <div class="article-number" aria-hidden="true">{index + 1}</div>
+                    <div class="article-info">
+                      <h3>{article.data.title}</h3>
+                      <p>{article.data.description}</p>
+                      <div class="article-meta">
+                        {article.data.estimatedReadingTime && (
+                          <span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
+                        )}
+                        {article.data.tags && article.data.tags.length > 0 && (
+                          <span class="meta-item">
+                            {article.data.tags.map((tag) => (
+                              <span class="tag">{tag}</span>
+                            ))}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </a>
+                ))}
               </div>
-            </a>
+            </section>
+
+            <section class="learning-hub-section" id="reference">
+              <h2>Reference</h2>
+              <p class="section-description">Quick-lookup resources to keep handy while you work.</p>
+              <div class="article-list">
+                {reference.map((article) => (
+                  <a href={`${base}learning-hub/${article.id}/`} class="article-card">
+                    <div class="article-number" aria-hidden="true">📖</div>
+                    <div class="article-info">
+                      <h3>{article.data.title}</h3>
+                      <p>{article.data.description}</p>
+                      <div class="article-meta">
+                        {article.data.estimatedReadingTime && (
+                          <span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
+                        )}
+                        {article.data.tags && article.data.tags.length > 0 && (
+                          <span class="meta-item">
+                            {article.data.tags.map((tag) => (
+                              <span class="tag">{tag}</span>
+                            ))}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </section>
+
+            <section class="learning-hub-section" id="hands-on">
+              <h2>Hands-on</h2>
+              <p class="section-description">Interactive samples and recipes to learn by doing.</p>
+              <div class="article-list">
+                <a href={`${base}learning-hub/cookbook/`} class="article-card">
+                  <div class="article-number" aria-hidden="true">🍳</div>
+                  <div class="article-info">
+                    <h3>Cookbook</h3>
+                    <p>Code samples, recipes, and examples for building with GitHub Copilot tools</p>
+                    <div class="article-meta">
+                      <span class="meta-item">
+                        <span class="tag">samples</span>
+                        <span class="tag">recipes</span>
+                        <span class="tag">sdk</span>
+                      </span>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </section>
           </div>
-        </section>
+        </div>
       </div>
     </div>
   </main>