The example below uses the collapsedSize, collapsible, and onCollapse props to mimic the UX of apps like VS Code by configuring a panel to be collapsible. Panels can be collapsed all the way (to size 0) but in this example, the panel is configured to collapse to a size that allows the file icons to remain visible.
Drag the bar between the file browser and the source viewer to resize.
1 <div id="errors" style="
2 background: #c00;
3 color: #fff;
4 display: none;
5 margin: -20px -20px 20px;
6 padding: 20px;
7 white-space: pre-wrap;
8 "></div>
9 <div id="root"></div>
10 <script>
11 window.addEventListener('mousedown', function(e) {
12 document.body.classList.add('mouse-navigation');
13 document.body.classList.remove('kbd-navigation');
14 });
15 window.addEventListener('keydown', function(e) {
16 if (e.keyCode === 9) {
17 document.body.classList.add('kbd-navigation');
18 document.body.classList.remove('mouse-navigation');
19 }
20 });
21 window.addEventListener('click', function(e) {
22 if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
23 e.preventDefault();
24 }
25 });
26 window.onerror = function(message, source, line, col, error) {
27 var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
28 errors.textContent += text + '
29 ';
30 errors.style.display = '';
31 };
32 console.error = (function(old) {
33 return function error() {
34 errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '
35 ';
36 errors.style.display = '';
37 old.apply(this, arguments);
38 }
39 })(console.error);
40 </script>1 <PanelGroup direction="horizontal">
2 <SideTabBar />
3 <Panel collapsible={true} collapsedSize={35} minSize={10}>
4 <SourceBrowser />
5 </Panel>
6 <PanelResizeHandle />
7 <Panel>
8 <SourceViewer />
9 </Panel>
10 </PanelGroup>