replace weird header thing with sidebar topics

astro.config.mjs

@@ -1,6 +1,8 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightLinksValidator from 'starlight-links-validator';
+import starlightSidebarTopics from 'starlight-sidebar-topics';
+import { sidebarTopics } from './src/config/sidebarTopics';
 import remarkGlossary from './src/plugins/remark-glossary';
 import remarkCenter from './src/plugins/remark-center';
 import remarkFigure from './src/plugins/remark-figure';
@@ -70,9 +72,13 @@ export default defineConfig({
             // TOC is disabled globally but can be enabled per-directory in src/config/tocConfig.ts
             // or per-page via frontmatter (tableOfContents: true)
             tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 3 },
-            // Sidebar configuration is now managed in src/config/sidebarConfig.ts
-            // This allows different sidebars per top-level navigation section
-            plugins: [starlightLinksValidator()],
+            plugins: [
+                // Separates sidebar into topics that are switchable with a dropdown
+                starlightSidebarTopics(sidebarTopics, {
+                    exclude: ['/', '/test-content-figure'],
+                }),
+                starlightLinksValidator(),
+            ],
         }),
     ],
 });

package.json

@@ -33,6 +33,8 @@
         "@mdi/js": "^7.4.47",
         "astro": "^7.1.3",
         "sharp": "^0.34.5",
+        "starlight-sidebar-topics": "^0.8.0",
+        "starlight-sidebar-topics-dropdown": "^0.6.0",
         "unist-util-visit": "^5.1.0"
     },
     "devDependencies": {
@@ -43,9 +45,10 @@
         "astro-eslint-parser": "^1.4.0",
         "eslint": "^10.5.0",
         "eslint-plugin-astro": "^1.7.0",
-        "mdast-util-mdx": "^3.0.0",
+        "globals": "^16.5.0",
         "husky": "^9.1.7",
         "lint-staged": "^17.0.8",
+        "mdast-util-mdx": "^3.0.0",
         "mdast-util-mdx-jsx": "^3.2.0",
         "mdx2vast": "^0.3.1",
         "prettier": "^3.8.4",
@@ -55,7 +58,6 @@
         "remark-frontmatter": "^5.0.0",
         "remark-lint-no-dead-urls": "^2.0.1",
         "remark-mdx": "^3.1.1",
-        "globals": "^16.5.0",
         "remark-preset-lint-recommended": "^7.0.1",
         "starlight-links-validator": "^0.20.0",
         "tsx": "^4.22.4",

src/config/sidebarConfig.ts

@@ -21,17 +21,6 @@ export type Item = {
 
 // Define which URL paths belong to which sidebar section
 export const sidebarSections: Record<string, SidebarSection[]> = {
-    // Home page - minimal sidebar or none
-    '/': [],
-
-    // Feature Guide section
-    '/feature-guide': [
-        {
-            label: 'Website Feature Guide',
-            items: [{ label: 'Overview', slug: 'feature-guide' }],
-        },
-    ],
-
     // Learning Course section
     '/learning-course': [
         {
@@ -257,67 +246,6 @@ export const sidebarSections: Record<string, SidebarSection[]> = {
             ],
         },
     ],
-
-    // Getting Started section
-    '/getting-started': [
-        {
-            label: 'Getting Started',
-            items: [
-                {
-                    label: 'Website Feature Guide',
-                    slug: 'learning-course/getting-started/website-feature-guide',
-                },
-                {
-                    label: 'Required Tools',
-                    slug: 'learning-course/getting-started/required-tools',
-                },
-                {
-                    label: 'VS Code Overview',
-                    slug: 'learning-course/getting-started/vscode-overview',
-                },
-                {
-                    label: 'Forking and Cloning',
-                    slug: 'learning-course/getting-started/forking-and-cloning',
-                },
-                {
-                    label: 'Intro to Java',
-                    slug: 'learning-course/stage0/stage-overview',
-                },
-            ],
-        },
-    ],
-
-    // Intro To Java section
-    '/intro-to-java': [
-        {
-            label: 'Intro to Java',
-            items: [
-                {
-                    label: 'Stage Overview',
-                    slug: 'learning-course/stage0/stage-overview',
-                },
-                {
-                    label: 'Java fundamentals',
-                    slug: 'learning-course/stage0/java-fundamentals',
-                },
-                {
-                    label: 'operators',
-                    slug: 'learning-course/stage0/operators',
-                },
-            ],
-        },
-    ],
-
-    // Resources section (content lives at /resources but navbar says "Other Resources")
-    // '/resources': [
-    //   {
-    //     label: 'Resources',
-    //     items: [
-    //       { label: 'Overview', slug: 'resources' },
-    //       { label: 'Glossary', slug: 'resources/glossary' },
-    //     ],
-    //   },
-    // ],
 };
 
 /**

src/config/sidebarTopics.ts

@@ -0,0 +1,56 @@
+import type { StarlightUserConfig } from '@astrojs/starlight/types';
+import { sidebarSections, type SidebarItem } from './sidebarConfig';
+
+type StarlightSidebarItem = NonNullable<StarlightUserConfig['sidebar']>[number];
+
+function convertItem(item: SidebarItem): StarlightSidebarItem {
+    if (item.items) {
+        return {
+            label: item.label,
+            collapsed: item.collapsed ?? false,
+            items: item.items.map(convertItem),
+        };
+    }
+    return { label: item.label, link: '/' + item.slug + '/' };
+}
+
+export const sidebarTopics = [
+    {
+        label: 'Learning Course',
+        id: 'learning-course',
+        link: '/learning-course/',
+        icon: 'notes',
+        items: sidebarSections['/learning-course']![0]!.items.map(convertItem),
+    },
+    {
+        label: "Educator's Guide",
+        id: 'educators-guide',
+        link: '/educators-guide/introduction/',
+        icon: 'open-book',
+        items: sidebarSections['/educators-guide']![0]!.items.map(convertItem),
+    },
+    {
+        label: 'Best Practices',
+        id: 'best-practices',
+        link: '/best-practices/overview/',
+        icon: 'approve-check-circle',
+        items: sidebarSections['/best-practices']![0]!.items.map(convertItem),
+    },
+    {
+        label: 'Resources',
+        id: 'resources',
+        link: '/resources/',
+        icon: 'document',
+        items: sidebarSections['/other-resources']![0]!.items.map(convertItem),
+    },
+    {
+        label: 'Contribution',
+        id: 'contribution',
+        link: '/contribution/',
+        icon: 'code-branch',
+        items: [
+            { label: 'Overview', link: '/contribution/' },
+            ...sidebarSections['/contribution']![0]!.items.map(convertItem),
+        ],
+    },
+];