ctx.layout

Read and drive side-panel collapse state through LayoutService. Read it reactively in React with useServiceState.

ctx.layout: LayoutService

Example

import { useServiceState } from "@silo-code/sdk";

function MyWidget() {
  const state = useServiceState(ctx.layout);
  return (
    <button onClick={() => ctx.layout.toggleSidePanel("left")}>
      {state.left.collapsed ? "Show" : "Hide"} left
    </button>
  );
}

Methods

On ctx.layout. Method names link to the full signature.

Method	What it does
getState()	Current frozen LayoutState.
subscribe(listener)	Observe changes; returns a Disposable.
toggleSidePanel(location)	Toggle a side column collapsed/expanded.
setSidePanelCollapsed(location, collapsed)	Set a column's collapsed state explicitly.
revealSidePanel(id)	Bring a registered panel to the foreground — make it active in its column and expand that column. No-op for an unknown id.

State

The readable state — a frozen LayoutState from getState(), subscribe, or useServiceState:

Property	Type	What it is
left	SidePanelColumnState	left column collapse state ({ collapsed })
right	SidePanelColumnState	right column collapse state ({ collapsed })

Types

Pass LayoutService.

Related: LayoutState · SidePanelColumnState · SideLocation.

See also

Other State members on ctx.