mobile menu overhaul

src/App.css

@@ -72,7 +72,6 @@ a {
   left: 0;
   transition: .4s;
   overflow: hidden;
-  border-bottom: solid 3px rgb(156, 49, 45, .4);
 }
 
 .navControl{
@@ -93,8 +92,7 @@ a {
   text-align: center;
   font-size: 1.2rem;
   transition: .4s;
-  padding-top: .5rem;
+  font-size: 1rem;
-  padding-bottom: .5rem;
   background-color: rgb(156, 49, 45, .4);
 }
 
@@ -106,6 +104,8 @@ a {
   color: white;
   margin: 0px;
   display: block;
+  padding-top: .3rem;
+  padding-bottom: .3rem;
 }
 
 #home {
@@ -315,6 +315,15 @@ a {
     display: unset;
   }
 
+  .header{
+    background-color: #1a1a1a;
+    border-bottom: solid 3px rgb(156, 49, 45, .4);
+  }
+
+  .header h1{
+    font-size: 1.5rem;
+  }
+
   .navBar {
     flex-direction: column;
   }
@@ -323,6 +332,10 @@ a {
     width: 100vw;
   }
 
+  .navControl{
+    max-height: 0px;
+  }
+
   .projectList {
     width: 95%;
   }

src/App.js

@@ -10,7 +10,9 @@ import Activities from './pages/Activities';
 import AboutMe from './pages/AboutMe';
 import AOS from 'aos';
 import 'aos/dist/aos.css'; // You can also use <link> for styles
-import './responsive'
+import { toggleMenu } from './responsive'
+
+
 
 AOS.init();
 function App() {
@@ -19,7 +21,7 @@ function App() {
       <div className="App">
         <div className="header">
           <a href="/"><h1>Andrew Simonson</h1></a>
-          <img src={menu} alt="menu" id='menu'/>
+          <img src={menu} alt="menu" id='menu' onClick={toggleMenu}/>
           <Nav id='navbar'>
             <Link to='/'>Home</Link>
             <a href='Resume.pdf' target='_blank'>Resume</a>

src/analytics.js

@@ -1,6 +0,0 @@
-window.dataLayer = window.dataLayer || [];
-function gtag() { dataLayer.push(arguments); }
-gtag('js', new Date());
-
-gtag('config', 'G-E2V93W9CNV');
-console.log("HHHHHHHHHHHHHH")

src/mobileMenu.js

@@ -1,4 +0,0 @@
-export function toggleMenu(){
-    const e = document.querySelector(".navControl");
-    e.style.display = "";
-  }

src/pages/AboutMe.js

@@ -56,7 +56,7 @@ export default function AboutMe() {
                         {[
                             {
                                 original: img4,
-                                description: "High School VEX Robotics President and Team Leader: I'm trying my best"
+                                description: "High School VEX Robotics President and Team Leader"
                             },
                             {
                                 original: img5,

src/responsive.js

@@ -1,27 +1,32 @@
-window.onpageshow = function () { onLoaded() };
+window.onload = function () { onLoaded() };
-
 function onLoaded() {
+  console.log("loaded trigger");
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+
   window.onresize = function () { resizer() };
-  document.getElementById("menu").onclick = function () { toggleMenu() };
   resizer();
+  if(window.innerWidth < 1200){
+    const e = document.querySelector(".navControl");
+    e.style.maxHeight = '0px';
+  }
 }
 
 function resizer() {
-  scrollFunction();
   const e = document.querySelector(".navControl");
   if (window.innerWidth > 1200) { // desktop view
+    scrollFunction();
     window.onscroll = function () { scrollFunction() };
-    bottomBorderOff();
     e.style.maxHeight = `${e.scrollHeight + 10}px`;
   }
   else { // mobile view
     window.onscroll = '';
     document.querySelector('.header').style.backgroundColor = '#1a1a1a';
     document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
-    // document.querySelector('.header > h1').style.color = "#a8a8a8";
+    // document.querySelector('.header > h1').style.color = "#ecebeb";
-    document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+    document.querySelector(".header").style.borderBottomWidth = '3px';
     e.style.maxHeight = '0px';
-    bottomBorderOn();
+    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
   } 
 }
 
@@ -30,32 +35,23 @@ function scrollFunction() {
     document.querySelector('.header').style.backgroundColor = '#1a1a1a';
     document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
     // document.querySelector('.header > h1').style.color = "#a8a8a8";
-    document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
   } else {
     document.querySelector('.header').style.backgroundColor = 'rgba(0,0,0,0)';
     document.querySelector('.header > a > h1').style.fontSize = "2rem";
     // 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' });
+    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
   }
 }
 
-function toggleMenu() {
+export function toggleMenu() {
   const e = document.querySelector(".navControl");
+  const bar = document.querySelector(".header");
   if (e.style.maxHeight === '0px') {
-    bottomBorderOff();
     e.style.maxHeight = `${e.scrollHeight + 10}px`;
+    bar.style.borderBottomWidth = '0px';
   } else {
-    bottomBorderOn();
     e.style.maxHeight = '0px';
+    bar.style.borderBottomWidth = '3px';
   }
 }
-
-function bottomBorderOn() {
-  const e = document.querySelector('.header');
-  e.style.borderBottomWidth = "3px";
-}
-
-function bottomBorderOff() {
-  const e = document.querySelector('.header');
-  e.style.borderBottomWidth = "0px";
-}