refactoring

src/scripts/hd-app.js

@@ -0,0 +1,61 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+  // Constants declaration
+  const navBar        = document.querySelector("#navbar");
+  const searchBar     = document.querySelector("#search-bar");
+  const searchView    = document.querySelector("#search-view");
+  const searchInput   = searchBar.querySelector("#search-input");
+  const btnToggle     = document.querySelector(".btn-toggle");
+
+
+  // Shortcuts
+  window.addEventListener("keydown", function(e) {
+    // CTRL + K triggers the search feature
+    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
+      e.preventDefault();
+      e.stopPropagation();
+      openSearchBar();
+    }
+
+    // Escape key
+    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
+      closeSearchBar();
+    }
+  });
+
+  searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
+
+  function openSearchBar(e) {
+    navBar.classList.add("search-mode");
+    searchBar.querySelector("#search-input").focus();
+    searchView.classList.add("search-mode");
+  }
+
+  function closeSearchBar(e) {
+    navBar.classList.remove("search-mode");
+    searchView.classList.remove("search-mode");
+  }
+  
+  function emptySearchBar(e) {
+    searchInput.value = '';
+    openSearchBar();
+    searchInput.focus;
+  }
+
+
+  // Synchronizes the search input with the <ldp-form>s 
+  searchInput.addEventListener("keyup", (e) => {
+    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
+      el.value = searchInput.value;
+    });
+  });
+
+
+  btnToggle.addEventListener('click', e => {
+    navBar.classList.toggle('open');
+    e.stopPropagation();
+  });
+
+  window.addEventListener('click', e=>{
+    navBar.classList.remove('open');
+  });
+});

src/scripts/index.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function(event) {
+  // Constants declaration
+  const navBar = document.querySelector('#navbar');
+  const btnToggle = document.querySelector('.btn-toggle');
+  if (!navBar || !btnToggle) return;
+
+  btnToggle.addEventListener('click', e => {
+    navBar.classList.toggle('open');
+    e.stopPropagation();
+  });
+
+  window.addEventListener('click', e => {
+    navBar.classList.remove('open');
+  });
+});