styled mobile menu collapse

src/App.css

@@ -25,6 +25,7 @@ body {
   float: right;
   margin-right: 1rem;
   margin-top: .25rem;
+  cursor: pointer;
 }
 
 h1, h2 {
@@ -71,6 +72,11 @@ a {
   left: 0;
   transition: .4s;
   overflow: hidden;
+  border-bottom: solid 3px rgb(156, 49, 45, .4);
+}
+
+.navControl{
+  transition: .4s;
 }
 
 .navBar {

src/responsive.js

@@ -1,6 +1,5 @@
 window.onload = function () { onLoaded() };
 
-
 function onLoaded() {
   scrollFunction();
   resizer();
@@ -12,11 +11,13 @@ function resizer() {
   scrollFunction();
   const e = document.querySelector(".navControl");
   if (window.innerWidth > 1200) { // desktop view
-    e.style.display = "";
+    bottomBorderOff();
+    e.style.maxHeight = `${e.scrollHeight + 10}px`;
     window.onscroll = function () { scrollFunction() };
   }
   else { // mobile view
-    e.style.display = "none";
+    e.style.maxHeight = '0px';
+    bottomBorderOn();
     window.onscroll = '';
     document.querySelector('.header').style.backgroundColor = '#1a1a1a';
     document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
@@ -39,11 +40,23 @@ function scrollFunction() {
   }
 }
 
-function toggleMenu(){
+function toggleMenu() {
   const e = document.querySelector(".navControl");
-  if(e.style.display === "none"){
-    e.style.display = "";
+  if (e.style.maxHeight === '0px') {
+    bottomBorderOff();
+    e.style.maxHeight = `${e.scrollHeight + 10}px`;
   } else {
-    e.style.display = "none";
+    bottomBorderOn();
+    e.style.maxHeight = '0px';
   }
 }
+
+function bottomBorderOn() {
+  const e = document.querySelector('.header');
+  e.style.borderBottomWidth = "3px";
+}
+
+function bottomBorderOff() {
+  const e = document.querySelector('.header');
+  e.style.borderBottomWidth = "0px";
+}