Added go up button - Fixed click item nav mobile error

layouts/index.html

@@ -13,6 +13,9 @@
     </main>
 
     {{ partial "footer.html" .}}
+    <a href="#" class="to_top">
+      <i class="fa-solid fa-arrow-up"></i>
+    </a>
   </body>
   {{ partial "script.html" .}}
 </html>

static/css/main.css

@@ -13,6 +13,10 @@
   --primary-color-gradient: linear-gradient(360deg, rgba(53,130,129,1) 0%, rgba(50,153,152,1) 35%, rgba(47,173,172,1) 100%);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: var(--ff-main);
   font-weight: 300;
@@ -44,6 +48,32 @@ body {
   animation-fill-mode: both;
 }
 
+body > a.to_top {
+  background: #FFF;
+  color: #329998;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  margin: 1rem;
+  border-radius: 50%;
+  box-shadow: 1px 2px 20px rgba(0,0,0, .1);
+  opacity: 0;
+  pointer-events: none;
+  transition: all .4s;
+}
+
+body > a.to_top.active {
+  bottom: 10px;
+  pointer-events: auto;
+  opacity: 1;
+}
+
 .container {
   /* Extra Large: xl */ 
   max-width: 1200px;

static/js/main.js

@@ -1,14 +1,26 @@
 // CONFIGURATION NAVBAR
 const header = document.querySelector(".main-header");
+const topTop = document.querySelector(".to_top");
 window.addEventListener("scroll", () => {
   const scrollPos = window.scrollY;
   if (scrollPos > 10) {
     header.classList.add("scrolled");
+    topTop.classList.add("active");
   } else {
     header.classList.remove("scrolled");
+    topTop.classList.remove("active");
   }
 })
 
+const navItems = document.querySelectorAll(".main-header > .nav-links > .nav-link");
+const menuBtn = document.getElementById("menu-btn");
+
+navItems.forEach(item => {
+  item.addEventListener('click', function() {
+    menuBtn.checked = false
+  });
+});
+
 // CONFIGURATION FORM
 
 const form = document.getElementById("contactForm");