JordanTranchina.github.io/index.js at master · JordanTranchina/JordanTranchina.github.io · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function mobileMenu() {
    if (document.querySelector(".hamburger.active")) {
        // closing nav & toggling hamburger state to off
        document.querySelector(".hamburger").classList.toggle("active");
        console.log("Open hamburger is closing");

        // closing hamburger lines
        document.querySelector(".bar1").classList.remove("active", "transform", "translate-y-1.5", "rotate-45")
        document.querySelector(".bar2").classList.remove("active", "invisible")
        document.querySelector(".bar3").classList.remove("active", "transform", "-translate-y-1.5", "-rotate-45")

        // closing nav
        document.querySelector(".containerNav").classList.remove("active", "h-full", "grid-rows-5")

        document.querySelector(".nav-index").classList.toggle("hidden")
        document.querySelector(".nav-index").classList.remove("row-start-2", "justify-self-center", "col-start-2", "row-start-2", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-about").classList.toggle("hidden")
        document.querySelector(".nav-about").classList.remove("row-start-3", "justify-self-center", "col-start-2", "row-start-3", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-portfolio").classList.toggle("hidden")
        document.querySelector(".nav-portfolio").classList.remove("row-start-4", "justify-self-center", "col-start-2", "row-start-4", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-contact").classList.toggle("hidden")
        document.querySelector(".nav-contact").classList.remove("row-start-5", "justify-self-center", "col-start-2", "row-start-5", "self-start", "text-4xl", "font-medium")

    } else {
        // opening nav & toggling hamburger state to active
        document.querySelector(".hamburger").classList.toggle("active");
        console.log("Closed hamburger is opening");

        // opening hamburger lines
        document.querySelector(".bar1").classList.add("active", "transform", "translate-y-1.5", "rotate-45")
        document.querySelector(".bar2").classList.add("active", "invisible")
        document.querySelector(".bar3").classList.add("active", "transform", "-translate-y-1.5", "-rotate-45")

        // opening nav
        document.querySelector(".containerNav").classList.add("active", "h-full", "grid-rows-5", "duration-300")

        document.querySelector(".nav-index").classList.toggle("hidden")
        document.querySelector(".nav-index").classList.add("row-start-2", "justify-self-center", "col-start-2", "row-start-2", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-about").classList.toggle("hidden")
        document.querySelector(".nav-about").classList.add("row-start-3", "justify-self-center", "col-start-2", "row-start-3", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-portfolio").classList.toggle("hidden")
        document.querySelector(".nav-portfolio").classList.add("row-start-4", "justify-self-center", "col-start-2", "row-start-4", "self-start", "text-4xl", "font-medium")

        document.querySelector(".nav-contact").classList.toggle("hidden")
        document.querySelector(".nav-contact").classList.add("row-start-5", "justify-self-center", "col-start-2", "row-start-5", "self-start", "text-4xl", "font-medium")
    }
}

function hoverOver(hoverId) {
    document.getElementById(hoverId).firstElementChild.classList.remove("hidden")
    return
}

function hoverOff(hoverId) {
    document.getElementById(hoverId).firstElementChild.classList.add("hidden")
    return
}