Change hamburger menu icon to angle icons

Signed-off-by: Christian König <ckoenig@posteo.de>
pi-hole · Aug 12, 2022 · b1d35e1 · b1d35e1
1 parent aa17619
commit b1d35e1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -774,7 +774,6 @@ function updateSummaryData(runOnce) {
   };
 
   $.getJSON("api.php?summaryRaw", function (data) {
-
     if ("FTLnotrunning" in data) {
       data.dns_queries_today = "Lost";
       data.ads_blocked_today = "connection";
@@ -1210,3 +1209,8 @@ $(function () {
 window.addEventListener("resize", function () {
   $(".chartjs-tooltip").remove();
 });
+
+// change sidebar icon on collapse/expand
+$(".sidebar-toggle-svg").click(function () {
+  $(this).find("svg").toggleClass("fa-angle-double-left fa-angle-double-right");
+});
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
@@ -249,7 +249,7 @@ function getTemperature()
         <nav class="navbar navbar-static-top">
             <!-- Sidebar toggle button-->
             <a href="#" class="sidebar-toggle-svg" data-toggle="push-menu" role="button">
-                <i aria-hidden="true" class="fa fa-bars"></i>
+                <i aria-hidden="true" class="fa fa-angle-double-left"></i>
                 <span class="sr-only">Toggle navigation</span>
                 <span class="warning-count hidden" id="top-warning-count"></span>
             </a>

diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -697,6 +697,13 @@ li:not(.menu-open) .treeview-menu .warning-count {
   }
 }
 
+/* reverse side menu collapse arrows on mobile screens */
+@media (max-width: 767px) {
+  .sidebar-toggle-svg {
+    transform: scaleX(-1);
+  }
+}
+
 .icon-bounce {
   display: inline-block;
   position: relative;