Update gradio_sidebar.py

gradio_sidebar.py

@@ -1,12 +1,9 @@
 head="""
     <script>
-           function open_control() {
+           function top_open_control() {
                 var panel = document.querySelector('#gs_top_control_panel');
-                var split_json = []
-                var out_json = []
-                split_json = panel.classList.value.split(' ')
-                console.log(split_json.length)
                 if (panel.classList.value.includes("open") === false) {
+                panel.classList = '#gs_top_control_panel'
                 panel.classList.toggle('open');
                 console.log('clicked')
                 } else {
@@ -54,13 +51,12 @@ css="""
     }
 #gs_left_control_panel {
     position: fixed;
-    width: fit-content;
     left: -110%;
     z-index: 9999;
     width: 330px;
     top: 50px;
     box-shadow: black 0px 0px 12px 0px;
-    transition: left 0.5s linear;
+    transition: left 0.5s cubic-bezier(0.4, 0, 1, 1);
     }
 #gs_left_control_panel.open {
     left: 0%;
@@ -98,7 +94,7 @@ css="""
 #left_control_btn.open{
     left:340px;
 }
-.contain #gs_top_bar {
+#gs_top_bar {
     height: 50px;
     width: 100%;
     position: fixed;
@@ -107,7 +103,7 @@ css="""
     left: 0px;
     z-index: 99999;
     }
-.contain #gs_top_bar.open {
+#gs_top_bar.open {
     left:350px;
 }
 #gs_left_bar {
@@ -125,6 +121,6 @@ css="""
     left: 0px;
 }
   """
-topbar="""<div id='gs_top_bar'><div id='top_control_btn' onclick='open_control()'>Controls</div></div>"""
+topbar="""<div id='gs_top_bar'><div id='top_control_btn' onclick='top_open_control()'>Controls</div></div>"""
 leftbar="""<div id='gs_left_bar'><div id='left_control_btn' onclick='left_open_control()'>Controls</div></div>"""
-rightbar="""<div id='gs_top_bar'><div id='right_control_btn' onclick='open_control()'>Controls</div></div>"""
+rightbar="""<div id='gs_top_bar'><div id='right_control_btn' onclick='top_open_control()'>Controls</div></div>"""