Update gradio_sidebar.py

gradio_sidebar.py

@@ -1,48 +1,67 @@
 head="""
     <script>
            function open_control() {
-                var panel = document.querySelector('#gs_control_panel');
-
+                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 (split_json.length === 2 || panel.classList.value.includes("  ")) {
                 panel.classList.toggle('open');
                 console.log('clicked')
                 } else {
-                panel.classList = '.contain #gs_control_panel'
+                panel.classList = '.contain #gs_top_control_panel'
+                console.log('panel is open, closing')
+                };
+                };
+            function left_open_control() {
+                var panel = document.querySelector('#gs_left_control_panel');
+                var left_bar = document.querySelector('#gs_left_bar');
+                var left_btn = document.querySelector('#left_control_btn');
+                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');
+                left_bar.classList.toggle('open');
+                left_btn.classList.toggle('open');
+                console.log('clicked')
+                } else {
+                panel.classList = '.contain #gs_left_control_panel'
+                left_bar.classList = '#gs_left_bar'
+                left_btn.classList = '#left_control_btn'
                 console.log('panel is open, closing')
-
                 };
                 };
-
         </script>
       """ 
 css="""
-.contain #gs_control_panel {
+.contain #gs_top_control_panel {
     position: fixed;
-    right: 110%;
+    right: 100%;
     z-index: 9999;
     width: 40%;
     top: 50px;
     box-shadow: 0 0 12px 0px black;
     transition: right 0.5s ease;
     }
-.contain #gs_control_panel.open {
+.contain #gs_top_control_panel.open {
     right: 60%;
     }
-#top_bar {
-    height: 50px;
-    width: 100%;
+.contain #gs_left_control_panel {
     position: fixed;
-    background: #185991;
-    top: 0px;
-    left: 0px;
-    z-index: 99999;
+    right: 100%;
+    z-index: 9999;
+    width: 40%;
+    top: 50px;
+    box-shadow: 0 0 12px 0px black;
+    transition: right 0.5s linear;
+    }
+.contain #gs_left_control_panel.open {
+    right: 60%;
     }
-#control_btn {
+#top_control_btn {
     height: 20px;
     padding: 10px;
     cursor: pointer;
@@ -55,6 +74,53 @@ css="""
     background: #1e293b;
     height: fit-content;
     width: fit-content; 
+}
+#left_control_btn {
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    color: white;
+    position: fixed;
+    z-index: 2147483647;
+    top: 45px;
+    left: -20px;
+    background: rgb(30, 41, 59);
+    height: fit-content;
+    width: fit-content;
+    transition: left 0.5s linear;
+    transform: rotate(90deg);
+
+}
+#left_control_btn.open{
+    left:340px;
+}
+.contain #gs_top_bar {
+    height: 50px;
+    width: 100%;
+    position: fixed;
+    background: #185991;
+    top: 0px;
+    left: 0px;
+    z-index: 99999;
+    }
+.contain #gs_top_bar.open {
+    left:350px;
+}
+#gs_left_bar {
+    height: 100%;
+    width: 360px;
+    position: fixed;
+    background: rgb(24, 89, 145);
+    top: 0px;
+    left: -370px;
+    z-index: 9999;
+    transition: left 0.5s linear;
+
+}
+#gs_left_bar.open {
+    left: 0px;
 }
   """
-topbar="""<div id='top_bar'><div class='control_btn' name='control_btn' id='control_btn' onclick='open_control()'>Controls</div></div>"""
+topbar="""<div id='gs_top_bar'><div id='top_control_btn' onclick='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>"""