From f202e6f75e5bee2363eb50a25bcca9bea1b3fdbd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 2 Apr 2021 10:41:18 +0200
Subject: [PATCH] feature: color swap on search

---
 src/scripts/menu-search-control.js            | 31 ++++++++++++++++---
 src/scripts/navigate-event.js                 | 19 ------------
 .../partials/widgets/hubl-menu-empty.pug      |  2 +-
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js
index bd98663..7aff3c4 100644
--- a/src/scripts/menu-search-control.js
+++ b/src/scripts/menu-search-control.js
@@ -1,7 +1,28 @@
-
 document.addEventListener("DOMContentLoaded", () => {
-  const searchField = document.querySelector('.menu-search');
-  console.log(searchField);
-  const leform = searchField.querySelector('form');
-  console.log(leform);
+  const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
+  MenuTabs.forEach(menuTab => {
+    const menuHeader = menuTab.querySelector('.jsMenuHeader');
+    const menuArrow = menuTab.querySelector('.jsMenuArrow')
+    const menuSub = menuTab.querySelector('.jsMenuSub');
+    const menuOption = menuTab.querySelector('.jsMenuOption');
+    const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
+  
+    menuHeader.addEventListener('click', e => {
+      menuArrow.classList.toggle('transform-up');
+      menuSub.classList.toggle('hidden');
+    });
+    menuOption.addEventListener('click', e => {
+      menuAdmin.classList.toggle('hidden');
+      e.stopPropagation();
+    });
+  });
+  
+  const searchForm = document.querySelector('.menu-search');
+  searchForm.addEventListener('formChange', () => {
+    if(document.querySelector('.menu-search input').value != "") {
+      searchForm.style.backgroundColor = "red"; //- Put overriden color here
+    } else {
+      searchForm.style.backgroundColor = "blue"; //- Put default color here
+    }
+  })
 });
\ No newline at end of file
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index 5a25fbb..d2fc2e7 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -1,22 +1,3 @@
-
-const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
-MenuTabs.forEach(menuTab => {
-  const menuHeader = menuTab.querySelector('.jsMenuHeader');
-  const menuArrow = menuTab.querySelector('.jsMenuArrow')
-  const menuSub = menuTab.querySelector('.jsMenuSub');
-  const menuOption = menuTab.querySelector('.jsMenuOption');
-  const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
-
-  menuHeader.addEventListener('click', e => {
-    menuArrow.classList.toggle('transform-up');
-    menuSub.classList.toggle('hidden');
-  });
-  menuOption.addEventListener('click', e => {
-    menuAdmin.classList.toggle('hidden');
-    e.stopPropagation();
-  });
-});
-
 // auxiliary function closes the user profile menu
 function closeUserControls() {
   let userControls = Array.from(document.querySelectorAll(".user-controls"));
diff --git a/src/views/partials/widgets/hubl-menu-empty.pug b/src/views/partials/widgets/hubl-menu-empty.pug
index 565840f..f3b260a 100644
--- a/src/views/partials/widgets/hubl-menu-empty.pug
+++ b/src/views/partials/widgets/hubl-menu-empty.pug
@@ -1,4 +1,4 @@
-if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory')
+if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') || componentSet.has('chat')
   solid-widget(name='hubl-menu-empty')
     template
       p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA')