Create gradio_sidebar

gradio_sidebar

@@ -0,0 +1,59 @@
+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; 
+}
+  """