Built mobile menu

src/App.css

@@ -18,6 +18,15 @@ body {
   font-family: "Roboto Condensed", sans-serif;
 }
 
+#menu{
+  height: 2rem;
+  display: none;
+  filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(95%) contrast(86%);
+  float: right;
+  margin-right: 1rem;
+  margin-top: .25rem;
+}
+
 h1, h2 {
   color: #ecebeb;
 }
@@ -296,6 +305,10 @@ a {
 
 @media screen and (max-width: 1200px) {
 
+  #menu{
+    display: unset;
+  }
+
   .navBar {
     flex-direction: column;
   }

src/App.js

@@ -1,11 +1,12 @@
 import { Route, Link, Routes, HashRouter as Router } from 'react-router-dom'
 
 import './App.css';
-// import ReactGA from 'react-ga'
+import menu from './assets/menu.svg'
 import Nav from './componets/Nav.js'
 import Socials from './componets/Socials.js'
 import Home from './pages/Home.js'
 import Projects from './pages/Projects';
+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
@@ -17,16 +18,19 @@ function App() {
       <div className="App">
         <div className="header">
           <a href="/"><h1>Andrew Simonson</h1></a>
+          <img src={menu} alt="menu" id='menu'/>
           <Nav id='navbar'>
             <Link to='/'>Home</Link>
             <a href='https://github.com/asimonson1125/Resume/raw/main/Resume.pdf' rel='noreferrer' target='_blank'>Resume</a>
             <Link to='/projects'>Projects</Link>
+           {/* <Link to='/activities'>Activities</Link> */}
             <Link to='/about'>About Me</Link>
           </Nav>
         </div>
         <Routes>
           <Route exact path='/' element={<Home />}></Route>
           <Route exact path='/projects' element={<Projects />}></Route>
+          <Route exact path='activities' element={<Activities />}></Route>
           <Route exact path='/about' element={<AboutMe />}></Route>
         </Routes>
         <div className='footer'>

src/assets/menu.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 377 377" style="enable-background:new 0 0 377 377;" xml:space="preserve">
+<g>
+	<circle cx="15" cy="88.5" r="15"/>
+	<rect x="75" y="73.5" width="302" height="30"/>
+	<circle cx="15" cy="288.5" r="15"/>
+	<rect x="75" y="273.5" width="302" height="30"/>
+	<circle cx="15" cy="188.5" r="15"/>
+	<rect x="75" y="173.5" width="302" height="30"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/mobileMenu.js

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

src/responsive.js

@@ -1,15 +1,49 @@
-window.onscroll = function() {scrollFunction()};
+window.onload = function () { onLoaded() };
+
+
+function onLoaded() {
+  scrollFunction();
+  resizer();
+  window.onresize = function () { resizer() };
+  document.getElementById("menu").onclick = function () { toggleMenu() };
+}
+
+function resizer() {
+  scrollFunction();
+  const e = document.querySelector(".navControl");
+  if (window.innerWidth > 1200) { // desktop view
+    e.style.display = "";
+    window.onscroll = function () { scrollFunction() };
+  }
+  else { // mobile view
+    e.style.display = "none";
+    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.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+  }
+}
 
 function scrollFunction() {
   if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
     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(){
+  const e = document.querySelector(".navControl");
+  if(e.style.display === "none"){
+    e.style.display = "";
+  } else {
+    e.style.display = "none";
   }
 }