Allow collapsing sidebar, make sidebar have minimum size

Author: eira-fransham

static/rustw.css

@@ -488,13 +488,26 @@ span#measure {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
+    min-width: 300px;
+}
+.div_sidebar.collapsed {
+    flex: 0 0 20px;
+    min-width: auto;
 }
 .div_side_tabbar {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
+.a_side_collapsebtn {
+    margin: 2px;
+    position: absolute;
+}
+.div_sidebar.collapsed .div_side_tabbar {
+    visibility: hidden;
+}
 .div_sidebar_tabs {
     display: flex;
     height: fit-content;

static/rustw.out.js

@@ -8416,10 +8416,28 @@ var Sidebar = exports.Sidebar = function (_React$Component) {
 
             return _react2.default.createElement(
                 'div',
-                { className: 'div_sidebar' },
+                {
+                    className: "div_sidebar" + (this.state.collapsed ? " collapsed" : "")
+                },
+                _react2.default.createElement(
+                    'a',
+                    {
+                        className: 'a_side_collapsebtn',
+                        href: 'javascript:void(0)',
+                        onClick: function onClick(_e) {
+                            return _this2.setState({ collapsed: !_this2.state.collapsed });
+                        }
+                    },
+                    this.state.collapsed ? "[+]" : "[-]"
+                ),
                 _react2.default.createElement(
                     _reactTabs.Tabs,
-                    { selectedIndex: this.state.tabIndex, className: 'div_side_tabbar', selectedTabClassName: 'selected', onSelect: onSelect },
+                    {
+                        selectedIndex: this.state.tabIndex,
+                        className: 'div_side_tabbar',
+                        selectedTabClassName: 'selected',
+                        onSelect: onSelect
+                    },
                     _react2.default.createElement(
                         _reactTabs.TabList,
                         { className: 'div_sidebar_tabs' },
@@ -8442,7 +8460,11 @@ var Sidebar = exports.Sidebar = function (_React$Component) {
                     _react2.default.createElement(
                         _reactTabs.TabPanel,
                         { className: 'div_sidebar_main' },
-                        _react2.default.createElement(_searchPanel.SearchPanel, _extends({ app: this.props.app }, this.props.search, { searchController: searchController }))
+                        _react2.default.createElement(_searchPanel.SearchPanel, _extends({
+                            app: this.props.app
+                        }, this.props.search, {
+                            searchController: searchController
+                        }))
                     ),
                     _react2.default.createElement(
                         _reactTabs.TabPanel,

static/rustw.out.js.map

@@ -48,25 +48,45 @@ export class Sidebar extends React.Component {
 
         const onSelect = tabIndex => this.setState({ tabIndex });
 
-        return <div className="div_sidebar">
-            <Tabs selectedIndex={this.state.tabIndex} className="div_side_tabbar" selectedTabClassName="selected" onSelect={onSelect}>
-                <TabList className="div_sidebar_tabs">
-                    <Tab className="div_sidebar_tab">search</Tab>
-                    <Tab className="div_sidebar_tab">files</Tab>
-                    <Tab className="div_sidebar_tab">symbols</Tab>
-                </TabList>
-                <TabPanel className="div_sidebar_main">
-                    <SearchPanel app={this.props.app} {...this.props.search} searchController={searchController} />
-                </TabPanel>
-                <TabPanel className="div_sidebar_main">
-                    <TreePanel app={this.props.app} tree={this.props.fileTreeData} />
-                </TabPanel>
-                <TabPanel className="div_sidebar_main">
-                    <SymbolPanel app={this.props.app} symbols={this.props.symbols} />
-                </TabPanel>
-            </Tabs>
-            <StatusBar status={this.props.status} />
-        </div>;
+        return (
+            <div
+                className={"div_sidebar" + (this.state.collapsed ? " collapsed" : "")}
+            >
+                <a
+                    className="a_side_collapsebtn"
+                    href="javascript:void(0)"
+                    onClick={_e => this.setState({ collapsed: !this.state.collapsed })}
+                >
+                    {this.state.collapsed ? "[+]" : "[-]"}
+                </a>
+                <Tabs
+                    selectedIndex={this.state.tabIndex}
+                    className="div_side_tabbar"
+                    selectedTabClassName="selected"
+                    onSelect={onSelect}
+                >
+                    <TabList className="div_sidebar_tabs">
+                        <Tab className="div_sidebar_tab">search</Tab>
+                        <Tab className="div_sidebar_tab">files</Tab>
+                        <Tab className="div_sidebar_tab">symbols</Tab>
+                    </TabList>
+                    <TabPanel className="div_sidebar_main">
+                        <SearchPanel
+                            app={this.props.app}
+                            {...this.props.search}
+                            searchController={searchController}
+                        />
+                    </TabPanel>
+                    <TabPanel className="div_sidebar_main">
+                        <TreePanel app={this.props.app} tree={this.props.fileTreeData} />
+                    </TabPanel>
+                    <TabPanel className="div_sidebar_main">
+                        <SymbolPanel app={this.props.app} symbols={this.props.symbols} />
+                    </TabPanel>
+                </Tabs>
+                <StatusBar status={this.props.status} />
+            </div>
+        );
     }
 }