Open and close panels

Open, resize, and close your app's panels from code with the panels.mode.set event.

Users open panels from the dock, and your app can also open, resize, and close its own panels with the panels.mode.set event. Your app can only control panels it declares in sanity.cli.ts.

import {useEmit} from '@sanity/sdk-react/dashboard'

export function OpenActivity() {
  const setPanelMode = useEmit('panels.mode.set')
  return (
    <button type="button" onClick={() => setPanelMode({name: 'activity', mode: 'aside'})}>
      Show activity
    </button>
  )
}

name is the panel view's name from sanity.cli.ts. panels.mode.set accepts these payloads:

• {name, mode: 'aside'}: Open the panel beside the current app.
• {name, mode: 'full'}: Open the panel over the main area.
• {name, size}: Set the open panel's width in pixels.
• null: Close the open panel.

One panel is open at a time, so opening a panel replaces any other open panel.

Read the panels.mode topic to show the current state, for example to toggle a panel:

import {useEmit, useTopic} from '@sanity/sdk-react/dashboard'

export function ToggleActivity() {
  const panelMode = useTopic('panels.mode')
  const setPanelMode = useEmit('panels.mode.set')
  const openPanel = panelMode?.ok ? panelMode.value : null
  const isOpen = openPanel?.name === 'activity'

  return (
    <button
      type="button"
      onClick={() => setPanelMode(isOpen ? null : {name: 'activity', mode: 'aside'})}
    >
      {isOpen ? 'Hide activity' : 'Show activity'}
    </button>
  )
}

When a panel is open, its value contains the owning app's appId, the panel's name, and its mode. An aside panel can also include its width as size.