Add mobile menu

Mirobit · Mirobit · commit 76ab46bae14d · 2020-12-20T17:48:03.000+01:00
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -4064,4 +4064,47 @@ ul.notifications {
   min-height: 300px;
   border: 1px solid #e5e5e5; }
 
-/** /Dropzone.js **/
+
+/* Mobile menu */
+.mobilenav{
+  display:none;
+}
+@media only screen and (max-width: 991px) {
+  /* Style the navigation menu */
+  .mobilenav {
+    overflow: hidden;
+    background-color: black;
+    position: relative;
+    display: block;
+  }
+  /* Hide the links inside the navigation menu (except for logo/home) */
+  .mobilenav #mobileLinks {
+    display: none;
+  }
+  /* Style navigation menu links */
+  .mobilenav a {
+    color: white;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+    display: block;
+  }
+  /* Style the hamburger menu */
+  .mobilenav a.icon {
+    background: black;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  /* Add a grey background color on mouse-over */
+  .mobilenav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  /* Style the active link (or home/logo) */
+  .mobilelogo {
+    background-color: #2A3F54;
+    color: white;
+  } 
+}
diff --git a/src/Peer.php b/src/Peer.php
@@ -85,8 +85,8 @@ function __construct($peer) {
 		$this->inbound = checkBool($peer["inbound"]);
 		$this->startingHeight = checkInt($peer["startingheight"]);
 		$this->banScore = checkInt($peer["banscore"]);
-		$this->syncedHeaders = checkInt($peer["synced_headers"]);
-		$this->syncedBlocks = checkInt($peer["synced_blocks"]);
+		//$this->syncedHeaders = checkInt($peer["synced_headers"]);
+		//$this->syncedBlocks = checkInt($peer["synced_blocks"]);
 		//$this->inflight = $peer["inflight"];
 		$this->whitelisted = checkBool($peer["whitelisted"]);
 		$this->bytessentPerMsg = checkArray($peer["bytessent_per_msg"]);
diff --git a/views/footer.phtml b/views/footer.phtml
@@ -1,6 +1,6 @@
 <footer>
 <div class="pull-right">
-<i class="fa fa-bitcoin orange"></i> <a href="https://github.com/mirobit/bitcoin-node-manager"> Node Manager v1.0.0</a> - © 2020
+<i class="fa fa-bitcoin orange"></i> <a href="https://github.com/mirobit/bitcoin-node-manager"> Node Manager v1.1.0</a> - © 2020
 </div>
 <div class="clearfix"></div>
 </footer>
@@ -13,4 +13,13 @@
 	}
 	?>
 	window.history.pushState("", "", "<?= $section ?>");
+
+  const openMobileMenu = () => {
+    const x = document.getElementById("mobileLinks");
+    if (x.style.display === "block") {
+      x.style.display = "none";
+    } else {
+      x.style.display = "block";
+    }
+}
 </script>
diff --git a/views/header.phtml b/views/header.phtml
@@ -32,6 +32,26 @@
   <body class="nav-md">
 	<div class="container body">
 	  <div class="main_container">
+    <!-- Mobile Menu -->
+    <div class="mobilenav">
+      <a href="index.php" class="mobilelogo"><i class="fa fa-btc" style="color:orange"></i> Bitcoin Node Manger</a>
+      <div id="mobileLinks">
+        <a href="?p=peers"><i class="fa fa-list"></i> Peers </a>
+        <a href="?p=rules"><i class="fa fa-file-text-o"></i> Rules </a>
+        <a href="?p=hoster"><i class="fa fa-database"></i> Hoster </a>
+        <a href="?p=banlist"><i class="fa fa-ban"></i> Ban List </a>
+        <a href="?p=blocks"><i class="fa fa-cube"></i> Blocks</a>
+        <a href="?p=forks"><i class="fa fa-arrows-h"></i> Forks </a>
+        <a href="?p=mempool"><i class="fa fa-database"></i> Memory Pool </a>
+        <a href="?p=wallet"><i class="fa fa-money"></i> Wallet </a>
+        <a href="?p=settings" ><i class="fa fa-cog"></i> Settings </a>
+        <a href="?p=about"><i class="fa fa-info"></i> About </a>
+      </div>
+      <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+        <i class="fa fa-bars"></i>
+      </a>
+    </div>
+    <!-- Logo -->
 		<div class="col-md-3 left_col">
 		  <div class="left_col scroll-view">
 			<div class="navbar nav_title" style="border-bottom: 1px solid #416182;">
