From de5ae1ede6862a68b62f0b518b68a95b7a065f57 Mon Sep 17 00:00:00 2001
From: Andrew Simonson <asimonson1125@gmail.com>
Date: Tue, 17 May 2022 01:37:10 -0400
Subject: [PATCH] styled mobile menu collapse

---
 src/App.css       |  6 ++++++
 src/responsive.js | 29 +++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 30a2548..c25c50f 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/responsive.js b/src/responsive.js
index cab8784..c72670c 100644
--- a/src/responsive.js
+++ b/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";
@@ -37,13 +38,25 @@ function scrollFunction() {
     // document.querySelector('.header > h1').style.color = "#ecebeb";
     document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
   }
-} 
+}
 
-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";
 }
\ No newline at end of file