refactor: portal sidebar

[alexluong]

Sidebar Refactor

Problem

Previously, ConfigurationModal and FilterSyntaxModal each created their own portal with id="sidebar". When both were open simultaneously, they would overlap and render unreadable content.

Solution

Introduced a shared Sidebar context that manages a single sidebar instance. Only one sidebar can be visible at a time - opening a new one replaces any existing sidebar.

API

import { useSidebar } from "../Sidebar/Sidebar";

const sidebar = useSidebar();

// Toggle - opens if closed, closes if same ID is already open
sidebar.toggle("filter-syntax", <FilterSyntaxGuide />);

// Always opens (replaces current sidebar if different ID)
sidebar.open("filter-syntax", <FilterSyntaxGuide />);

// Closes only if that ID is currently open
sidebar.close("filter-syntax");

Usage Example

const MyComponent = () => {
  const sidebar = useSidebar();

  return (
    <Button
      onClick={() =>
        sidebar.toggle("filter-syntax", <FilterSyntaxGuide />)
      }
    >
      Filter Syntax Guide
    </Button>
  );
};

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
outpost-docs	Ready	Preview, Comment	Dec 16, 2025 2:49pm
outpost-website	Ready	Preview, Comment	Dec 16, 2025 2:49pm