From f85a7cb04de0d10bf3cce467545a34836356bf7a Mon Sep 17 00:00:00 2001
From: sanjeevneo <13029422+sanjeevneo@users.noreply.github.com>
Date: Fri, 3 Nov 2023 02:15:02 +1100
Subject: [PATCH] Enhance navbar for dark mode support

---
 src/main/resources/static/js/darkmode.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js
index e7c3b402..6e1c6ef3 100644
--- a/src/main/resources/static/js/darkmode.js
+++ b/src/main/resources/static/js/darkmode.js
@@ -6,6 +6,11 @@ var elements = {
   darkModeStyles: null,
   rainbowModeStyles: null,
   darkModeIcon: null,
+  searchBar: null,
+  formControls: null,
+  navbar: null,
+  navIcons: null,
+  navDropdownMenus: null,
 }
 
 function getElements() {
@@ -15,6 +20,9 @@ function getElements() {
   elements.darkModeIcon = document.getElementById("dark-mode-icon")
   elements.searchBar = document.getElementById("searchBar")
   elements.formControls = document.querySelectorAll(".form-control")
+  elements.navbar = document.querySelectorAll("nav.navbar")
+  elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon")
+  elements.navDropdownMenus = document.querySelectorAll("nav .dropdown-menu")
 }
 
 function setMode(mode) {
@@ -29,6 +37,11 @@ function setMode(mode) {
     // Dark mode improvement
     elements.searchBar.classList.add("dark-mode-search")
     elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
+    // navbar toggle
+    elements.navbar.classList.remove("navbar-light", "bg-light")
+    elements.navbar.classList.add("navbar-dark", "bg-dark")
+    navDropdownMenus.forEach(menu => menu.classList.add("dropdown-menu-dark"))
+    navIcons.forEach(icon => (icon.style.filter = "invert(1)"))
     // Add the table-dark class to tables for dark mode
     var tables = document.querySelectorAll(".table")
     tables.forEach(table => {
@@ -43,6 +56,11 @@ function setMode(mode) {
     // Dark Mode Improvement
     elements.searchBar.classList.remove("dark-mode-search")
     elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
+    // navbar toggle
+    elements.navbar.classList.remove("navbar-dark", "bg-dark")
+    elements.navbar.classList.add("navbar-light", "bg-light")
+    navDropdownMenus.forEach(menu => menu.classList.remove("dropdown-menu-dark"))
+    navIcons.forEach(icon => (icon.style.filter = "none"))
     // Remove the table-dark class for light mode
     var tables = document.querySelectorAll(".table-dark")
     tables.forEach(table => {