hide/show sidebar

app.py

@@ -146,12 +146,26 @@ def update_ui_with_sections(sections_dict):
 with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
     gr.Markdown("# Wikipedia Translator")
     
-    # State variable to store sections
+    # State variables
     sections_state = gr.State({})
+    sidebar_expanded = gr.State(True)  # Track sidebar state, default is expanded
     
-    with gr.Row():
+    def toggle_sidebar(expanded):
+        """Toggle the sidebar visibility"""
+        new_expanded = not expanded
+        return (
+            new_expanded, 
+            gr.update(visible=new_expanded), 
+            gr.update(scale=3 if not new_expanded else 2),
+            gr.update(visible=not new_expanded)  # Control visibility of the show button
+        )
+    
+    with gr.Row() as main_layout:
         # Sidebar for configuration
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, visible=True) as sidebar:
+            # Add a toggle button at the top of the sidebar with updated icon
+            sidebar_toggle = gr.Button("« Hide Sidebar", scale=0)
+            
             gr.Markdown("### Configuration")
             
             with gr.Group():
@@ -196,8 +210,12 @@ with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
             """)
         
         # Main content area
-        with gr.Column(scale=2):
-            gr.Markdown("### Wikipedia Article")
+        with gr.Column(scale=2) as main_content:
+            # Show sidebar toggle button when sidebar is hidden (updated icon)
+            with gr.Row():
+                sidebar_show_btn = gr.Button("» Show Sidebar", visible=False, scale=0)
+                with gr.Column(scale=1):
+                    gr.Markdown("### Wikipedia Article")
             
             wiki_url = gr.Textbox(
                 label="Wikipedia URL",
@@ -279,7 +297,20 @@ with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
         inputs=[sections_state],
         outputs=section_components
     )
-
+    
+    # Connect the sidebar toggle buttons
+    sidebar_toggle.click(
+        fn=toggle_sidebar,
+        inputs=[sidebar_expanded],
+        outputs=[sidebar_expanded, sidebar, main_content, sidebar_show_btn]
+    )
+    
+    sidebar_show_btn.click(
+        fn=toggle_sidebar,
+        inputs=[sidebar_expanded],
+        outputs=[sidebar_expanded, sidebar, main_content, sidebar_show_btn]
+    )
+    
 # Launch the app
 if __name__ == "__main__":
     demo.launch()