feat: multiple sidebars support

[scarf005]

What kind of changes does this PR include?

• Changes to Starlight code

Description

navgroups-showcase.mp4

• Closes Feature Request: Multiple Sidebar Support #658
• Made sidebar configuration can be a record of sidebars with links to match from.
• Copied a new example page, examples/navbars to demonstrate new navbar support.

TODO

• Update docs
• Add E2E tests
• handle base path

Help Needed

• would there be a better way to make navbars more responsive?
• header column width changes w/wo sidebars, but i was unable to find correct CSS equation to resolve the issue.

Without sidebar	With sidebar

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	8633fd4
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/64fd91ce03df9600083bc17a
😎 Deploy Preview	https://deploy-preview-687--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8633fd4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[delucis]

Thanks for trying to tackle this @scarf005! There’s a lot of considerations going into how to implement a feature that has as a big an impact as this one. It might be best to spend some time discussing what an API should look like and all the ways it interacts with different parts of how Starlight works to make sure we understand all the use cases and implications.

I’d suggest we discuss in #658 first, before looking at implementing anything, so that we don’t risk sinking too much time into building code that might not end up being the solution we go for. Still appreciate you trying to figure this out though!

[scarf005]

I see, thanks for the consideration. opening it as it's mostly 'feature complete' and could spark some ideas.

[delucis]

Closing as it is now somewhat stale and our component overrides system offers some workarounds while we figure out the bigger picture. Thanks again for the PR!

[asturur]

Do you have any example on how the component ovverides let me achieve multiple sidebars?

[delucis]

@asturur Here’s one example of using the URL of the current page to filter the sidebar for different products: https://stackblitz.com/edit/github-dubgkv?file=src%2Foverrides%2FSidebar.astro

[p-dg]

@delucis Thanks for your example. I am a designer playing around with starlight, trying to implement customized sidebars per route. Your example helps, but Pagination and your styling example only work on the first level ob the subdirectory.
So styling for product-2 and Pagination works on
/product-2/[index] but not on succeeding pages, for example
/product-2/set-up
Can you provide a working example for subpages / subdirectories? Thanks in advance!

[carcigenicate]

@p-dg

I figured it out in case you're still interested. All you need to do is change the definition of currentBase in their example:

const currentBase = `/${Astro.url.pathname.split('/')[1]}`;

Now, it only considers the first segment in the path.