> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Side Panel

> A sliding side panel for displaying contextual content alongside your main view.

<Note>
  **Different from other Neo widgets**: Side panel is managed through static methods on `NeoSidePanel` rather than a widget you place in your build tree. It works automatically with both [`NeoSidebarLayout`](/layouts/sidebar) and [`NeoTopbarLayout`](/layouts/topbar).
</Note>

## Examples

<Tabs>
  <Tab title="Show / Hide">
    <CodeGroup>
      ```dart Show lines theme={null}
      NeoSidePanel.show(
        ref,
        child: Padding(
          padding: .all(theme.spacings.large),
          child: Column(
            crossAxisAlignment: .start,
            children: [
              Text(
                "Panel Title",
                style: theme.textStyles.header2,
              ),
              Gap(theme.spacings.medium),
              Text(
                "Panel content goes here.",
                style: theme.textStyles.body2.copyWith(
                  color: theme.colors.fgSecondary,
                ),
              ),
            ],
          ),
        ),
      );
      ```

      ```dart Hide lines theme={null}
      NeoSidePanel.hide(ref);
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Toggle with ID">
    <CodeGroup>
      ```dart Toggle lines theme={null}
      NeoSidePanel.toggle(
        ref,
        id: "details",
        width: 500,
        child: const DetailsPanel(),
      );
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Methods

### NeoSidePanel.show()

Opens the side panel with the given content. If a panel is already visible, it replaces the content.

<ParamField path="ref" type="WidgetRef" required>
  The widget reference from a `ConsumerWidget` or `HookConsumerWidget`.
</ParamField>

<ParamField path="child" type="Widget" required>
  The content widget to display inside the side panel.
</ParamField>

<ParamField path="id" type="String?">
  An optional identifier for the panel. Useful with `toggle` to determine whether to show or hide.
</ParamField>

<ParamField path="width" type="double" default="448">
  The width of the side panel in logical pixels.
</ParamField>

### NeoSidePanel.hide()

Hides the currently visible side panel with a smooth close animation.

<ParamField path="ref" type="WidgetRef" required>
  The widget reference to access the side panel provider.
</ParamField>

### NeoSidePanel.toggle()

Toggles the side panel visibility. If the panel is visible and has the same `id` (or no ID), it hides. Otherwise, it shows the panel with the new content.

<ParamField path="ref" type="WidgetRef" required>
  The widget reference from a `ConsumerWidget` or `HookConsumerWidget`.
</ParamField>

<ParamField path="child" type="Widget" required>
  The content widget to display inside the side panel.
</ParamField>

<ParamField path="id" type="String?">
  An optional identifier for the panel.
</ParamField>

<ParamField path="width" type="double" default="448">
  The width of the side panel in logical pixels.
</ParamField>

## State Management

<ParamField path="neoCurrentSidePanelStateProvider" type="Provider<NeoSidePanelState>">
  The Riverpod provider that holds the current side panel state. You can watch this to react to panel visibility changes.
</ParamField>

<CodeGroup>
  ```dart Read State lines theme={null}
  final sidePanelState = ref.watch(neoCurrentSidePanelStateProvider);
  final isVisible = sidePanelState.isVisible;
  final panelId = sidePanelState.id;
  final panelWidth = sidePanelState.width;
  ```
</CodeGroup>

## Best Practices

* **Use IDs for multi-panel UIs**: When toggling between different panel contents (e.g., details vs. settings), assign unique `id` values so `toggle` can distinguish between them.
* **Desktop only**: The side panel is only visible on desktop-sized screens (768px and above). On mobile, the panel is hidden automatically.
* **Keep content focused**: Side panels work best for contextual details, editing forms, or supplementary information related to the main content.

## Integration Notes

* **Layout integration**: The side panel is automatically available when using [`NeoSidebarLayout`](/layouts/sidebar) or [`NeoTopbarLayout`](/layouts/topbar). No additional setup is required.