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

@@ -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',
 ];
 

website/src/pages/learning-hub/index.astro

@@ -42,7 +42,44 @@ const reference = articles
 
     <div class="page-content">
       <div class="container">
-        <section class="learning-hub-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>
+
+          <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">
@@ -70,7 +107,7 @@ const reference = articles
               </div>
             </section>
 
-        <section class="learning-hub-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">
@@ -97,7 +134,8 @@ const reference = articles
                 ))}
               </div>
             </section>
-        <section class="learning-hub-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">
@@ -119,5 +157,7 @@ const reference = articles
             </section>
           </div>
         </div>
+      </div>
+    </div>
   </main>
 </BaseLayout>