Update gradio_sidebar.py

gradio_sidebar.py

@@ -34,6 +34,30 @@ head="""
                 console.log('panel is open, closing')
                 };
                 };
+            function right_open_control() {
+                var panel = document.querySelector('#gs_right_control_panel');
+                var right_bar = document.querySelector('#gs_right_bar');
+                var right_btn = document.querySelector('#right_control_btn');
+                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_right_control_panel'
+                right_bar.classList = '#gs_right_bar'
+                right_btn.classList = '#right_control_btn'
+                panel.classList.toggle('open');
+                right_bar.classList.toggle('open');
+                right_btn.classList.toggle('open');
+                console.log('clicked')
+                } else {
+                panel.classList = '#gs_right_control_panel'
+                right_bar.classList = '#gs_right_bar'
+                right_btn.classList = '#right_control_btn'
+                console.log('panel is open, closing')
+                };
+                };
+
         </script>
       """ 
 css="""
@@ -61,6 +85,19 @@ css="""
 #gs_left_control_panel.open {
     left: 0%;
     }
+#gs_right_control_panel {
+    position: fixed;
+    right: -110%;
+    z-index: 9999;
+    width: 330px;
+    top: 50px;
+    box-shadow: black 0px 0px 12px 0px;
+    transition: right 0.5s linear;
+
+    }
+#gs_right_control_panel.open {
+    right: 0%;
+    }
 #top_control_btn {
     height: 20px;
     padding: 10px;
@@ -94,6 +131,25 @@ css="""
 #left_control_btn.open{
     left:340px;
 }
+#right_control_btn {
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    color: white;
+    position: fixed;
+    z-index: 2147483647;
+    top: 70px;
+    right: -20px;
+    background: rgb(30, 41, 59);
+    height: fit-content;
+    width: fit-content;
+    transition: right 0.5s linear;
+transform: rotate(270deg);
+
+}
+#right_control_btn.open{
+    right:340px;
+}
 #gs_top_bar {
     height: 50px;
     width: 100%;
@@ -115,12 +171,24 @@ css="""
     left: -370px;
     z-index: 9999;
     transition: left 0.5s linear;
-
 }
 #gs_left_bar.open {
     left: 0px;
+}
+#gs_right_bar {
+    height: 100%;
+    width: 360px;
+    position: fixed;
+    background: rgb(24, 89, 145);
+    top: 0px;
+    right: -360px;
+    z-index: 9999;
+    transition: right 0.5s linear;
+}
+#gs_right_bar.open {
+    right: 0px;
 }
   """
 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='top_open_control()'>Controls</div></div>"""
+rightbar="""<div id='gs_right_bar'><div id='right_control_btn' onclick='right_open_control()'>Controls</div></div>"""