feat(Editor): implement toggle functionality for editor pane visibility and update styles

Author: dontry

src/components/ContentWrap.jsx

@@ -995,7 +995,7 @@ export default class ContentWrap extends Component {
         }
         onDragEnd={this.mainSplitDragEndHandler.bind(this)}
       >
-        <div id="js-code-side">
+        <div id="js-code-side" className={this.props.isEditorCollapsed ? 'hidden' : ''}>
           <Tabs
             keyboardShortcutsBtnClickHandler={
               this.props.keyboardShortcutsBtnClickHandler

src/components/Icons.jsx

@@ -330,6 +330,9 @@ export function Icons() {
             fill="#FDC709"
           />
         </symbol>
+        <symbol id="icon-sidebar" viewBox="0 0 24 24">
+         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3.5v17M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z"/>
+        </symbol>
       </symbol>
     </svg>
   );

src/components/MainHeader.jsx

@@ -137,6 +137,26 @@ export function MainHeader(props) {
           </svg>
           <span>My library</span>
         </button>
+        <button
+          className={`px-4 py-1.5 bg-black-600 duration-200 font-semibold flex items-center gap-2 rounded-lg ${
+            props.isEditorCollapsed 
+              ? 'hover:opacity-80' 
+              : 'hover:bg-primary-700 text-white'
+          }`}
+          aria-label="Toggle editor pane"
+          title={props.isEditorCollapsed ? "Expand editor pane" : "Collapse editor pane"}
+          onClick={props.onToggleEditorCollapse}
+        >
+          <svg 
+            className={`h-5 w-5 transition-transform duration-200 ${
+              props.currentLayoutMode === 2 ? 'rotate-90' : 
+              props.currentLayoutMode === 3 ? 'rotate-180' : 
+              'rotate-0'
+            }`}
+          >
+            <use xlinkHref="#icon-sidebar" />
+          </svg>
+        </button>
       </div>
       <div>
         {isEditing ? (
@@ -243,7 +263,6 @@ export function MainHeader(props) {
                     className="h-full w-full appearance-none"
                     crossOrigin="anonymous"
                     src={props.user.photoURL}
-                    className=""
                   />
                 </div>
                 {isSubscribed && (

src/components/app.jsx

@@ -94,6 +94,7 @@ export default class App extends Component {
         title: '',
         externalLibs: { js: '', css: '' },
       },
+      isEditorCollapsed: false,
     };
     this.defaultSettings = {
       preserveLastCode: true,
@@ -758,6 +759,25 @@ BookLibService.Borrow(id) {
     this.toggleLayout(layoutId);
   }
 
+  async toggleEditorCollapse() {
+    await this.setState({
+      isEditorCollapsed: !this.state.isEditorCollapsed,
+    });
+    
+    // Apply CSS class to body to control layout
+    if (this.state.isEditorCollapsed) {
+      document.body.classList.add('editor-collapsed');
+    } else {
+      document.body.classList.remove('editor-collapsed');
+    }
+    
+    mixpanel.track({
+      event: 'toggleEditorCollapse',
+      category: 'ui',
+      label: this.state.isEditorCollapsed ? 'collapsed' : 'expanded',
+    });
+  }
+
   // Calculates the sizes of html, css & js code panes.
   getCodePaneSizes() {
     var sizes;
@@ -1661,6 +1681,7 @@ BookLibService.Borrow(id) {
               openCheatSheet={this.openCheatSheet.bind(this)}
               onUpdateImage={this.onUpdateImage.bind(this)}
               currentItem={this.state.currentItem}
+              currentLayoutMode={this.state.currentLayoutMode}
               onLogin={this.loginBtnClickHandler.bind(this)}
               externalLibCount={this.state.externalLibCount}
               openBtnHandler={this.openBtnClickHandler.bind(this)}
@@ -1679,6 +1700,8 @@ BookLibService.Borrow(id) {
               user={this.state.user}
               settingsBtnClickHandler={this.handleSettingsBtnClick.bind(this)}
               unsavedEditCount={this.state.unsavedEditCount}
+              isEditorCollapsed={this.state.isEditorCollapsed}
+              onToggleEditorCollapse={this.toggleEditorCollapse.bind(this)}
             />
           )}
           {this.isEmbed && (
@@ -1709,6 +1732,8 @@ BookLibService.Borrow(id) {
               this,
             )}
             layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
+            isEditorCollapsed={this.state.isEditorCollapsed}
+            onToggleEditorCollapse={this.toggleEditorCollapse.bind(this)}
           />
           {this.isEmbed ? null : (
             <Footer

src/style.css

@@ -353,6 +353,7 @@ body:not(.light-version).overlay-visible .main-container {
 .code-side,
 .demo-side {
   flex-basis: inherit;
+  flex-grow: 1;
   position: relative;
   width: 50%;
 }