jsdotcom/script.js at main · jakespodek/jsdotcom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
console.log('%c Hire me!', 'color: #40FF40; font-weight: bold; font-size: 16px');

const hamburger = document.getElementById('hamburger');
const bigX = document.getElementById('bigX');
const navList = document.getElementById('navList');
const header = document.querySelector('header');
const nav = document.querySelector('nav');
const wideScreen = window.matchMedia("(min-width: 666px)");

const checkNav = () => {
    if (navList.classList.contains('mobileNavShow')) {
        header.style.height = "60vh";
        nav.style.height = "60vh";
        bigX.style.display = "block";
        hamburger.style.display = "none";
    } else {
        header.style.height = "6rem"
        nav.style.height = "initial";
        bigX.style.display = "none";
        hamburger.style.display = "block";
    };
};

hamburger.addEventListener('click', () => {
    navList.classList.add('mobileNavShow');
    checkNav();
});

bigX.addEventListener('click', () => {
    navList.classList.remove('mobileNavShow');
    checkNav();
})

const closeMobileNav = (wideScreen) => {
    // if screen width is greater than 666px, close mobile nav
    if (wideScreen.matches) {
        navList.classList.remove('mobileNavShow');
        checkNav();
        hamburger.style.display = "none";
    } else {
        hamburger.style.display = "block";
    }
}

wideScreen.addEventListener("change", () => {
    closeMobileNav(wideScreen);
})