From 9756dc9b2a9e4e460f757c2c075011bb1fa5ad6f Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Thu, 21 Apr 2022 08:13:41 -0400
Subject: [PATCH] Top nav buttons

UI improvement: Top nav buttons now show "active" when user is on their respective page.
---
 homepage/style.css |  5 +++++
 homepage/views.php | 14 ++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/homepage/style.css b/homepage/style.css
index c497065..3c1e680 100644
--- a/homepage/style.css
+++ b/homepage/style.css
@@ -158,6 +158,11 @@ button:hover {
   color: white;
 }
 
+.topnav .button-hover {
+  background-color: rgb(219, 295, 235) !important;
+  color: black;
+}
+
 .topnav .icon {
   display: none;
 }
diff --git a/homepage/views.php b/homepage/views.php
index 612f4ab..4408b02 100644
--- a/homepage/views.php
+++ b/homepage/views.php
@@ -30,6 +30,20 @@
 </form>
 <button href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="images/menu.png"></button>
 </div>
+
+<script>
+  var topbuttons = document.querySelectorAll("button[form='views']");
+  if(window.location.search.substr(1) != '') {
+    for (var i = 0; i < topbuttons.length; i++) {
+       if(topbuttons[i].value == decodeURIComponent(window.location.search.substr(1)).replace(/\+/g,' ').split('=').pop()) {
+            topbuttons[i].classList.add("button-hover");
+       }
+     }
+  } else {
+    topbuttons[0].classList.add("button-hover");
+  }
+</script>
+
 <div class="views">
 <?php
 if(isset($_GET['view'])){