small updates

3 files changed, 13 insertions, 47 deletions

diff --git a/src/css/style.css b/src/css/style.css
index d9bf3c56..2fbd7daa 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -75,6 +75,7 @@ body {
 .animate.animation--delay-p5s {
   animation-delay: 0.5s;
 }
+
 .animate.animation--delay-p3s {
   animation-delay: 0.3s;
 }
@@ -135,6 +136,7 @@ header {
     margin-right: 5mm;
     padding-top: 3mm;
     padding-bottom: 3mm;
+    border-radius: 8px;
     color: #F4E8C1;
 }
 
@@ -160,6 +162,7 @@ header {
 
 .navBar a:hover {
   background: rgba(255, 255, 255, 0.2);
+  outline: ridge rgba(128, 128, 128, .6);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   transition: all 1s
diff --git a/src/html/headers.html b/src/js/header.js
index ccc4a6bc..91320021 100644
--- a/src/html/headers.html
+++ b/src/js/header.js
@@ -1,3 +1,9 @@
+let header = document.querySelector('[header]');
+let newElement = document.createElement('div');
+let page = header.getAttribute('page');
+
+console.log(page);
+newElement.innerHTML = `
 <!-- header -->
 <header id="navBarHeader">
     <nav class="navBar">
@@ -10,3 +16,7 @@
         </div>
     </nav> 
 </header>
+`;
+
+header.appendChild(newElement);
+document.getElementById("btn"+page).setAttribute('class', 'active');
diff --git a/src/js/includeheader.js b/src/js/includeheader.js
deleted file mode 100644
index 5ac7d067..00000000
--- a/src/js/includeheader.js
+++ /dev/null
@@ -1,47 +0,0 @@
-function includeHeader() {
-  var z, i, elmnt, file, xhttp;
-  // loop through a collection of all HTML elements
-  z = document.getElementsByTagName("*");
-  for (i = 0; i < z.length; i++) {
-    elmnt = z[i];
-    // search for elements with a certain attribute
-    file = elmnt.getAttribute("include-header");
-    if (file) {
-      // make an HTTP request using the attribute value as the file name
-      xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
-          if (this.status == 200) {
-            elmnt.innerHTML = this.responseText;
-            setActiveLink(); // Set the active link after including the HTML
-          }
-          if (this.status == 404) {
-            elmnt.innerHTML = "Page not found.";
-          }
-          // remove the attribute and call this function once more
-          elmnt.removeAttribute("include-header");
-          includeHeader();
-        }
-      };
-      xhttp.open("GET", file, true);
-      xhttp.send();
-      // exit the function
-      return;
-    }
-  }
-}
-
-// Set the active link based on the current page
-function setActiveLink() {
-  var currentPath = window.location.pathname;
-  var navLinks = document.getElementsByClassName("navBar")[0].getElementsByTagName("a");
-  for (var i = 0; i < navLinks.length; i++) {
-    var link = navLinks[i];
-    var href = link.getAttribute("href");
-    if (href === currentPath) {
-      link.classList.add("active");
-    } else {
-      link.classList.remove("active");
-    }
-  }
-}