-
-
Notifications
You must be signed in to change notification settings - Fork 413
/
navbar.js
66 lines (56 loc) · 2.08 KB
/
navbar.js
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
63
64
65
66
const mobileMenu = document.querySelector(".mobile-menu");
const mobileTrigger = document.querySelector(".mobile-menu__trigger");
const overlay = document.querySelector(".overlay");
let initialPoint, finalPoint;
document.addEventListener("touchstart", function(event) {
initialPoint = event.changedTouches[0];
});
document.addEventListener("touchend", function(event) {
finalPoint = event.changedTouches[0];
let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 120 || yAbs > 120) {
if (xAbs > yAbs) {
if (finalPoint.pageX < initialPoint.pageX) {
// Swipe left
mobileMenu.classList.remove("mobile-menu_open");
overlay.style.visibility = "hidden";
} else {
// Swipe right
mobileMenu.classList.add("mobile-menu_open");
overlay.style.visibility = "visible";
}
}
}
});
mobileTrigger.addEventListener("click", function() {
mobileMenu.classList.toggle("mobile-menu_open");
overlay.style.visibility = mobileMenu.classList.contains("mobile-menu_open") ? "visible" : "hidden";
});
overlay.addEventListener("click", function() {
mobileMenu.classList.remove("mobile-menu_open");
overlay.style.visibility = "hidden";
});
window.addEventListener("scroll", function() {
const navbar = document.querySelector(".navbar-collapse");
const navLinks = document.querySelectorAll(".navbar-nav .nav-item a");
if (window.scrollY > 50) {
navbar.style.backgroundColor = "#1a1c29";
navLinks.forEach(link => {
link.style.color = "#ffffff";
});
} else {
navbar.style.backgroundColor = "#2b2d42";
navLinks.forEach(link => {
link.style.color = "#edf2f4";
});
}
});
function toggleDropdown(show) {
const dropdownMenu = document.querySelector('.dropdown-menu');
if (show) {
dropdownMenu.style.display = 'block';
} else {
dropdownMenu.style.display = 'none';
}
}