gradio_sidebar.py

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: 40%;
    top: 50px;
    box-shadow: 0 0 12px 0px black;
    transition: right 0.5s ease;
    }
.contain #control_panel.open {
    right: 60%;
    }
#top_bar {
    height: 50px;
    width: 100%;
    position: fixed;
    background: #185991;
    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; 
}
  """