andrew/asimonson1125.github.io
1
0
Fork 0
mirror of https://github.com/asimonson1125/asimonson1125.github.io.git synced 2026-02-25 05:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

Built mobile menu

Browse Source
This commit is contained in:
Andrew Simonson
2022-05-17 00:01:09 -04:00
parent 8c1d210a26
commit a683ecbc4c
5 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.css
View File

@@ -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;
}

6
src/App.js
View File

@@ -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'>

43
src/assets/menu.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 764 B

4
src/mobileMenu.js Normal file
View File

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

40
src/responsive.js
View File

@@ -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";
}
}