How make a SideBar hide and show

đź”’ Gradio
1

I want the sidebar called “sidebar_left” to be hidden or shown, when I press the “btn_toggle_sidebar” button, how do I do it?
I’ve been stuck for 2 days now

import gradio as gr
css='./css/template.css'
LANGS = ["ace_Arab", "eng_Latn", "fra_Latn", "spa_Latn"]

app= gr.Blocks(css=css)

# def active():
#     state_bar = not sidebar_right.visible
#     return print(state_bar)

sidebar_state = False

def toggle_sidebar():
    sidebar_state = not sidebar_state
    return print(sidebar_state)


with app:
    with gr.Row():
        with gr.Column(visible=sidebar_state) as sidebar_left:
            gr.Markdown("SideBar Left")
        with gr.Column() as main:
            with gr.Row(): 
                nav_bar = gr.Markdown("NavBar")
            with gr.Row():
                with gr.Column():
                    gr.Chatbot()
                    with gr.Row():
                        prompt = gr.TextArea(label="",placeholder="Ask me")
                        btn_a = gr.Button("Audio",size="sm")
                        btn_b = gr.Button("Send",size="sm")
                        btn_c = gr.Button("Clear",size="sm")
                        btn_d = gr.Button("Mute",size="sm")
                        lang = gr.Dropdown(label="Source Language", choices=LANGS)

                        btn_toggle_sidebar = gr.Button("Toggle Sidebar")
                        btn_toggle_sidebar.click(toggle_sidebar)
                        
                        #btn_a.click(active)

        with gr.Column(visible=False) as sidebar_right:
            gr.Markdown("SideBar Right")

app.launch()
2

Something like this should work:

import gradio as gr
css='./css/template.css'
LANGS = ["ace_Arab", "eng_Latn", "fra_Latn", "spa_Latn"]

app= gr.Blocks(css=css)

# def active():
#     state_bar = not sidebar_right.visible
#     return print(state_bar)


def toggle_sidebar(state):
    state = not state
    return gr.update(visible = state), state


with app:
    with gr.Row():
        with gr.Column(visible=False) as sidebar_left:
            gr.Markdown("SideBar Left")
        with gr.Column() as main:
            with gr.Row():
                nav_bar = gr.Markdown("NavBar")
            with gr.Row():
                with gr.Column():
                    gr.Chatbot()
                    with gr.Row():
                        prompt = gr.TextArea(label="",placeholder="Ask me")
                        btn_a = gr.Button("Audio",size="sm")
                        btn_b = gr.Button("Send",size="sm")
                        btn_c = gr.Button("Clear",size="sm")
                        btn_d = gr.Button("Mute",size="sm")
                        lang = gr.Dropdown(label="Source Language", choices=LANGS)

                        sidebar_state = gr.State(False)

                        btn_toggle_sidebar = gr.Button("Toggle Sidebar")
                        btn_toggle_sidebar.click(toggle_sidebar, [sidebar_state], [sidebar_left, sidebar_state])

                        #btn_a.click(active)

        with gr.Column(visible=False) as sidebar_right:
            gr.Markdown("SideBar Right")

app.launch()
2 Likes