# Sidebars and split views

### Resizable, left primary panel

Preview

Code

```js
<Canvas ctx={ctx}>
  <div style={{ height: 500, position: 'relative' }}>
    <VerticalSplit primaryPane="left" size="25%" minSize={220}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <Toolbar>
          <ToolbarStack stackSize="l">
            <ToolbarTitle>Primary</ToolbarTitle>
          </ToolbarStack>
        </Toolbar>
        <div
          style={{
            flex: '1',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '150px',
          }}
        >
          Main content
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
        <Toolbar>
          <ToolbarStack stackSize="l">
            <ToolbarTitle>Secondary</ToolbarTitle>
          </ToolbarStack>
        </Toolbar>
        <div
          style={{
            flex: '1',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '150px',
          }}
        >
          Sidebar
        </div>
      </div>
    </VerticalSplit>
  </div>
</Canvas>
```

### Resizable, right primary panel

Preview

Code

```js
<Canvas ctx={ctx}>
  <div style={{ height: 500, position: 'relative' }}>
    <VerticalSplit primaryPane="right" size="25%" minSize={220}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <Toolbar>
          <ToolbarStack stackSize="l">
            <ToolbarTitle>Secondary</ToolbarTitle>
          </ToolbarStack>
        </Toolbar>
        <div
          style={{
            flex: '1',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '150px',
          }}
        >
          Sidebar
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
        <Toolbar>
          <ToolbarStack stackSize="l">
            <ToolbarTitle>Primary</ToolbarTitle>
          </ToolbarStack>
        </Toolbar>
        <div
          style={{
            flex: '1',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '150px',
          }}
        >
          Main content
        </div>
      </div>
    </VerticalSplit>
  </div>
</Canvas>
```

### Collapsible

Preview

Code

```js
  <Canvas ctx={ctx}>
   <div style={{ height: 500, position: 'relative' }}>
     <StateManager initial={true}>
       {(isCollapsed, setCollapsed) => (
         <VerticalSplit
           primaryPane="left"
           size="25%"
           minSize={220}
           isSecondaryCollapsed={isCollapsed}
           onSecondaryToggle={setCollapsed}
         >
           <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
             <Toolbar>
               <ToolbarStack stackSize="l">
                 <ToolbarTitle>Primary</ToolbarTitle>
               </ToolbarStack>
             </Toolbar>
             <div
               style={{
                 flex: '1',
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 height: '150px',
               }}
             >
               Main content
             </div>
           </div>
           <div
             style={{
               display: 'flex',
               flexDirection: 'column',
               height: '100%',
               borderLeft: '1px solid var(--color--border)',
             }}
           >
             <Toolbar>
               <ToolbarStack stackSize="l">
                 <ToolbarTitle>Secondary</ToolbarTitle>
               </ToolbarStack>
             </Toolbar>
             <div
               style={{
                 flex: '1',
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 height: '150px',
               }}
             >
               Sidebar
             </div>
           </div>
         </VerticalSplit>
       )}
     </StateManager>
   </div>
 </Canvas>
```

### Overlay mode

Preview

Code

```js
  <Canvas ctx={ctx}>
   <div style={{ height: 500, position: 'relative' }}>
     <StateManager initial={true}>
       {(isCollapsed, setCollapsed) => (
         <VerticalSplit
           mode="overlay"
           primaryPane="left"
           size="25%"
           minSize={220}
           isSecondaryCollapsed={isCollapsed}
           onSecondaryToggle={setCollapsed}
         >
           <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
             <Toolbar>
               <ToolbarStack stackSize="l">
                 <ToolbarTitle>Primary</ToolbarTitle>
               </ToolbarStack>
             </Toolbar>
             <div
               style={{
                 flex: '1',
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 height: '150px',
               }}
             >
               Main content
             </div>
           </div>
           <div
             style={{
               display: 'flex',
               flexDirection: 'column',
               height: '100%',
               borderLeft: '1px solid var(--color--border)',
             }}
           >
             <Toolbar>
               <ToolbarStack stackSize="l">
                 <ToolbarTitle>Secondary</ToolbarTitle>
               </ToolbarStack>
             </Toolbar>
             <div
               style={{
                 flex: '1',
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 height: '150px',
               }}
             >
               Sidebar
             </div>
           </div>
         </VerticalSplit>
       )}
     </StateManager>
   </div>
 </Canvas>
```

## Related content in "Plugin SDK"

- [Introduction to the DatoCMS Plugin SDK](https://www.datocms.com/docs/plugin-sdk/introduction.md)
- [Build your first DatoCMS plugin](https://www.datocms.com/docs/plugin-sdk/build-your-first-plugin.md)
- [Real-world examples](https://www.datocms.com/docs/plugin-sdk/real-world-examples.md)
- [What hooks are](https://www.datocms.com/docs/plugin-sdk/what-hooks-are.md)
- [Config screen](https://www.datocms.com/docs/plugin-sdk/config-screen.md)
- [Custom pages](https://www.datocms.com/docs/plugin-sdk/custom-pages.md)
- [Sidebars and sidebar panels](https://www.datocms.com/docs/plugin-sdk/sidebar-panels.md)
- [Outlets](https://www.datocms.com/docs/plugin-sdk/form-outlets.md)
- [Field extensions](https://www.datocms.com/docs/plugin-sdk/field-extensions.md)
- [Manual field extensions](https://www.datocms.com/docs/plugin-sdk/manual-field-extensions.md)
- [Dropdown actions](https://www.datocms.com/docs/plugin-sdk/dropdown-actions.md)
- [Structured Text customizations](https://www.datocms.com/docs/plugin-sdk/structured-text-customizations.md)
- [Asset sources](https://www.datocms.com/docs/plugin-sdk/asset-sources.md)
- [Opening modals](https://www.datocms.com/docs/plugin-sdk/modals.md)
- [Event hooks](https://www.datocms.com/docs/plugin-sdk/event-hooks.md)
- [Customize record presentation](https://www.datocms.com/docs/plugin-sdk/customize-presentation.md)
- [React UI Components](https://www.datocms.com/docs/plugin-sdk/react-datocms-ui.md)
- [Button](https://www.datocms.com/docs/plugin-sdk/button.md)
- [Button group](https://www.datocms.com/docs/plugin-sdk/button-group.md)
- [Dropdown](https://www.datocms.com/docs/plugin-sdk/dropdown.md)
- [Form](https://www.datocms.com/docs/plugin-sdk/form.md)
- [Section](https://www.datocms.com/docs/plugin-sdk/section.md)
- [Sidebar panel](https://www.datocms.com/docs/plugin-sdk/sidebar-panel.md)
- [Spinner](https://www.datocms.com/docs/plugin-sdk/spinner.md)
- [Toolbar](https://www.datocms.com/docs/plugin-sdk/toolbar.md)
- [Sidebars and split views](https://www.datocms.com/docs/plugin-sdk/sidebars-and-split-views.md)
- [Additional permissions](https://www.datocms.com/docs/plugin-sdk/additional-permissions.md)
- [Working with form values](https://www.datocms.com/docs/plugin-sdk/working-with-form-values.md)
- [Publishing to Marketplace](https://www.datocms.com/docs/plugin-sdk/publishing-to-marketplace.md)
- [Releasing new plugin versions](https://www.datocms.com/docs/plugin-sdk/releasing-new-plugin-versions.md)
- [Migrating from legacy plugins](https://www.datocms.com/docs/plugin-sdk/migrating-from-legacy-plugins.md)
- [Upgrading plugins for dark mode](https://www.datocms.com/docs/plugin-sdk/upgrading-plugins-for-dark-mode.md)