import gradio as gr
head="""
    <script>
           function open_control() {
                var panel = document.querySelector('#control_panel');

                var split_json = []
                var out_json = []
                split_json = panel.classList.value.split(' ')

                console.log(split_json.length)
                if (split_json.length === 2 || panel.classList.value.includes("  ")) {
                panel.classList.toggle('open');
                console.log('clicked')
                } else {
                panel.classList = '.contain #control_panel'
                console.log('panel is open, closing')

                };
                };

        </script>
      """ 
css="""
.contain #control_panel {
    position: fixed;
    right: 100%;
    z-index: 9999;
    width: 90%;
    top: 50px;
    }
.contain #control_panel.open {
    right: 10%;
    }
#top_bar {
    height: 50px;
    width: 100%;
    position: fixed;
    background: aliceblue;
    top: 0px;
    left: 0px;
    z-index: 99999;
    }
#control_btn {
    height: 20px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    color: white;
    position: fixed;
    z-index: 9999999999999999;
    top: 5px;
    left: 10px;
    background: #1e293b;
    height: fit-content;
    width: fit-content; 
}
  """

with gr.Blocks(head=head,css=css) as app:
    gr.HTML("""<div id='top_bar'><div class='control_btn' name='control_btn' id='control_btn' onclick='open_control()'>Controls</div></div>""")
    with gr.Group(elem_id="control_panel"):
        gr.Textbox()
        gr.Slider()
        gr.Image()
    gr.Chatbot()
    gr.Textbox()
        
app.launch()