Style Fix: Re-implement headerbar expanding for mobile (#4615)

* Style Fix: Re-implement headerbar expanding for mobile

* UX: Implement modern collapse/expand indication

Author: VitroidFPV

src/css/main.less

@@ -2058,6 +2058,11 @@ each(range(12), {
     #reveal_btn {
         display: block;
         order: 4;
+        transition: transform 0.3s;
+        transform-origin: center center;
+    }
+    .headerbar.expand #reveal_btn {
+        transform: rotate(180deg);
     }
     #header_buttons {
         margin-left: auto;

src/index.html

@@ -105,7 +105,7 @@
             </div>
         </div>
         <div id="reveal_btn">
-            <em class="fas fa-ellipsis-v"></em>
+            <em class="fas fa-chevron-down"></em>
         </div>
     </div>
     <div id="log">

src/js/main.js

@@ -334,6 +334,10 @@ function startProcess() {
         $("#background").hide();
     });
 
+    $("#reveal_btn").on("click", function () {
+        $(".headerbar").toggleClass("expand");
+    });
+
     $(window).on("resize", function () {
         // 575px is the mobile breakpoint defined in CSS
         if (window.innerWidth > 575) {