Rename scripts => js & css => sass

resources/js/main.js

@@ -1,13 +1,13 @@
 const SCROLL_MIN = 100;
-const $scroll_to_top = document.getElementById("scroll-to-top");
+const $scroll_to_top = document.querySelector("#scroll-to-top");
-const $drawer = document.getElementById("drawer");
+const $drawer = document.querySelector("#drawer");
 const $drawer_item = document.querySelectorAll(".drawer-item");
 
 function checkScroll() {
     if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
-        $scroll_to_top.style.visibility = "visible";
+        $scroll_to_top.style.display = "block";
     } else {
-        $scroll_to_top.style.visibility = "hidden";
+        $scroll_to_top.style.display = "none";
     }
 }
 
@@ -16,10 +16,6 @@ function scrollToTop() {
     document.body.scrollTop = 0;
 }
 
-async function sleep(milliseconds) {
-    return new Promise(resolve => setTimeout(resolve, milliseconds));
-}
-
 async function toggleDropdown() {
     let expanded = $drawer.classList.contains("expanded");
     if (expanded) {
@@ -27,14 +23,15 @@ async function toggleDropdown() {
             $drawer_item[i].classList.toggle("visible");
         }
         $drawer.classList.toggle("expanded");
+        $scroll_to_top.style.display = "block";
     } else {
         $drawer.classList.toggle("expanded");
-        await sleep(250);
+        $scroll_to_top.style.display = "none";
+        await new Promise(r => setTimeout(r, 250));
         for (let i = 0; i < $drawer_item.length; i++) {
             $drawer_item[i].classList.toggle("visible");
         }
     }
 }
 
-window.addEventListener('load', checkScroll);
 window.addEventListener('scroll', checkScroll);

resources/sass/main.scss

@@ -18,7 +18,6 @@ html, body {
   padding: 0;
   background-color: variables.$clr_sides;
   scroll-behavior: smooth;
-  font-family: sans-serif;
 }
 
 a {
@@ -64,18 +63,6 @@ a {
   padding-bottom: 0;
 }
 
-.hidden {
-  display: none;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
 .no-decoration {
   text-decoration: none;
   color: inherit;
@@ -218,6 +205,7 @@ a {
 }
 
 #scroll-to-top {
+  display: none;
   width: $px_scroll-to-top_size;
   height: $px_scroll-to-top_size;
   position: fixed;