WIP -- experimenting with navbar product selector

[kenjenkins]

Docusaurus apparently does support custom properties on sidebar items, as long as they are nested under a 'customProps' object. (Individual pages can set these properties using the 'sidebar_custom_props' front matter key.)

Swizzle the DocSidebar component to add a wrapper that will filter the sidebar items depending on a 'products' custom property. Add a new custom navbar component to switch between products.

This doesn't work very well yet:

• the currently-selected product isn't persisted anywhere
• the dropdown menu doesn't dismiss when clicking an item
• the active product is not highlighted in the dropdown menu

[netlify]

✅ Deploy Preview for pomerium-docs ready!

Name	Link
🔨 Latest commit	e0a0180
🔍 Latest deploy log	https://app.netlify.com/sites/pomerium-docs/deploys/665658039c0aa6000875ab19
😎 Deploy Preview	https://deploy-preview-1434--pomerium-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[ZPain8464]

@kenjenkins I appreciate the help here. If we wanted to move forward with this approach, what would be next? I have a few items in mind:

• Make "Zero" the default product selection (this would enforce the "Zero as happy path" approach)
• Configure each product view so that the relevant "Quickstart" is the top-level item
• Refactor "Deploy" sidebar slice so that product-specific pages aren't so nested. For example, /docs/deploy/k8s/ingress might be /docs/deploy/ingress
• Make it so product-specific docs, like Clusters and Custom Domains, only appear in Capabilities or Concepts if that product is selected
• I think we could leave tabs alone, unless we wanted to be so thorough that only the relevant tab appears for its product. For example, in configuration reference pages or our Identity Provider guides.

If this is the best path forward, I'd be happy to work on this.