added toggle for bar

pages/edu.html

@@ -34,6 +34,9 @@
       <button id="saveBookmarkButton" class="hvr-pulse"> <i class="fa-solid fa-star"></i> </button>
     </div>
   </div>
+  <div style="position:absolute;right:2px;top:2px;height:50px;">
+    <button onclick="togglebar()" class="hide-btm-bar-btn hvr-sink"> <i class="fa-solid fa-bars-progress"></i> </button>
+  </div>
   <div id="mySidebar" class="sidebar">
     <br>
     <a style="font-size:12px;" onclick="hide();"><i style="margin-right:2px;margin-left:10px;"

static/css/edu.css

@@ -445,4 +445,35 @@ form {
 .menubtn:hover {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
+}
+
+.hide-btm-bar-btn {
+  border-radius: 60%;
+  margin-left: 1px;
+  margin-right: 1px;
+  width: 35px;
+  height: 35px;
+  background-color: rgba(0, 0, 0, 0.445);
+  backdrop-filter: blur(10px);
+  border: none;
+  cursor: pointer;
+}
+
+/* Sink */
+.hvr-sink {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
+  -webkit-transform: translateY(8px);
+  transform: translateY(8px);
 }

static/scripts/edu.js

@@ -36,6 +36,16 @@ function togglemenu() {
     menu.style.height = "0%";
   }
 }
+
+function togglebar() {
+  var osbar = document.querySelector(".os-bar")
+  if (osbar.style.height === "0px") {
+    osbar.style.height = "50px";
+  } else {
+    osbar.style.height = "0px";
+  }
+}
+
 function setIframe() {
   let encodedUrl = sessionStorage.getItem("encodedUrl");
   console.log(encodedUrl);