1
<Canvas ctx={ctx}>
2
  <div style={{ height: 500, position: 'relative' }}>
3
    <VerticalSplit primaryPane="left" size="25%" minSize={220}>
4
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
5
        <Toolbar>
6
          <ToolbarStack stackSize="l">
7
            <ToolbarTitle>Primary</ToolbarTitle>
8
          </ToolbarStack>
9
        </Toolbar>
10
        <div
11
          style={{
12
            flex: '1',
13
            display: 'flex',
14
            justifyContent: 'center',
15
            alignItems: 'center',
16
            height: '150px',
17
          }}
18
        >
19
          Main content
20
        </div>
21
      </div>
22
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
23
        <Toolbar>
24
          <ToolbarStack stackSize="l">
25
            <ToolbarTitle>Secondary</ToolbarTitle>
26
          </ToolbarStack>
27
        </Toolbar>
28
        <div
29
          style={{
30
            flex: '1',
31
            display: 'flex',
32
            justifyContent: 'center',
33
            alignItems: 'center',
34
            height: '150px',
35
          }}
36
        >
37
          Sidebar
38
        </div>
39
      </div>
40
    </VerticalSplit>
41
  </div>
42
</Canvas>

1
<Canvas ctx={ctx}>
2
  <div style={{ height: 500, position: 'relative' }}>
3
    <VerticalSplit primaryPane="right" size="25%" minSize={220}>
4
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
5
        <Toolbar>
6
          <ToolbarStack stackSize="l">
7
            <ToolbarTitle>Secondary</ToolbarTitle>
8
          </ToolbarStack>
9
        </Toolbar>
10
        <div
11
          style={{
12
            flex: '1',
13
            display: 'flex',
14
            justifyContent: 'center',
15
            alignItems: 'center',
16
            height: '150px',
17
          }}
18
        >
19
          Sidebar
20
        </div>
21
      </div>
22
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
23
        <Toolbar>
24
          <ToolbarStack stackSize="l">
25
            <ToolbarTitle>Primary</ToolbarTitle>
26
          </ToolbarStack>
27
        </Toolbar>
28
        <div
29
          style={{
30
            flex: '1',
31
            display: 'flex',
32
            justifyContent: 'center',
33
            alignItems: 'center',
34
            height: '150px',
35
          }}
36
        >
37
          Main content
38
        </div>
39
      </div>
40
    </VerticalSplit>
41
  </div>
42
</Canvas>

1
  <Canvas ctx={ctx}>
2
   <div style={{ height: 500, position: 'relative' }}>
3
     <StateManager initial={true}>
4
       {(isCollapsed, setCollapsed) => (
5
         <VerticalSplit
6
           primaryPane="left"
7
           size="25%"
8
           minSize={220}
9
           isSecondaryCollapsed={isCollapsed}
10
           onSecondaryToggle={setCollapsed}
11
         >
12
           <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
13
             <Toolbar>
14
               <ToolbarStack stackSize="l">
15
                 <ToolbarTitle>Primary</ToolbarTitle>
16
               </ToolbarStack>
17
             </Toolbar>
18
             <div
19
               style={{
20
                 flex: '1',
21
                 display: 'flex',
22
                 justifyContent: 'center',
23
                 alignItems: 'center',
24
                 height: '150px',
25
               }}
26
             >
27
               Main content
28
             </div>
29
           </div>
30
           <div
31
             style={{
32
               display: 'flex',
33
               flexDirection: 'column',
34
               height: '100%',
35
               borderLeft: '1px solid var(--border-color)',
36
             }}
37
           >
38
             <Toolbar>
39
               <ToolbarStack stackSize="l">
40
                 <ToolbarTitle>Secondary</ToolbarTitle>
41
               </ToolbarStack>
42
             </Toolbar>
43
             <div
44
               style={{
45
                 flex: '1',
46
                 display: 'flex',
47
                 justifyContent: 'center',
48
                 alignItems: 'center',
49
                 height: '150px',
50
               }}
51
             >
52
               Sidebar
53
             </div>
54
           </div>
55
         </VerticalSplit>
56
       )}
57
     </StateManager>
58
   </div>
59
 </Canvas>

1
  <Canvas ctx={ctx}>
2
   <div style={{ height: 500, position: 'relative' }}>
3
     <StateManager initial={true}>
4
       {(isCollapsed, setCollapsed) => (
5
         <VerticalSplit
6
           mode="overlay"
7
           primaryPane="left"
8
           size="25%"
9
           minSize={220}
10
           isSecondaryCollapsed={isCollapsed}
11
           onSecondaryToggle={setCollapsed}
12
         >
13
           <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
14
             <Toolbar>
15
               <ToolbarStack stackSize="l">
16
                 <ToolbarTitle>Primary</ToolbarTitle>
17
               </ToolbarStack>
18
             </Toolbar>
19
             <div
20
               style={{
21
                 flex: '1',
22
                 display: 'flex',
23
                 justifyContent: 'center',
24
                 alignItems: 'center',
25
                 height: '150px',
26
               }}
27
             >
28
               Main content
29
             </div>
30
           </div>
31
           <div
32
             style={{
33
               display: 'flex',
34
               flexDirection: 'column',
35
               height: '100%',
36
               borderLeft: '1px solid var(--border-color)',
37
             }}
38
           >
39
             <Toolbar>
40
               <ToolbarStack stackSize="l">
41
                 <ToolbarTitle>Secondary</ToolbarTitle>
42
               </ToolbarStack>
43
             </Toolbar>
44
             <div
45
               style={{
46
                 flex: '1',
47
                 display: 'flex',
48
                 justifyContent: 'center',
49
                 alignItems: 'center',
50
                 height: '150px',
51
               }}
52
             >
53
               Sidebar
54
             </div>
55
           </div>
56
         </VerticalSplit>
57
       )}
58
     </StateManager>
59
   </div>
60
 </Canvas>