-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
68 lines (54 loc) · 2.12 KB
/
script.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
67
68
const categoryElements = document.getElementsByClassName("category");
for (const categoryElement of categoryElements) {
categoryElement.onclick = () => {
const headerNameElement = document.querySelector(".header__name");
const categoryElementName = categoryElement.querySelector(
".category__name"
);
const activeCategoryElement = document.querySelector(".category_active");
activeCategoryElement.classList.toggle("category_active");
categoryElement.classList.toggle("category_active");
headerNameElement.innerHTML = categoryElementName.innerText;
};
}
const menuElement = document.querySelector(".menu");
let isOpened = false;
menuElement.onclick = () => {
const menuIconElement = document.querySelector(".menu__icon");
const sidebarElement = document.querySelector(".sidebar");
const categoryNameElements = document.getElementsByClassName(
"category__name"
);
const mainLogoNameElement = document.querySelector(
".sidebar__main-logo-name"
);
menuIconElement.classList.toggle("menu__open-icon");
menuIconElement.classList.toggle("menu__close-icon");
if (isOpened) {
sidebarElement.classList.remove("sidebar_opened");
sidebarElement.classList.add("sidebar_closed");
} else {
sidebarElement.classList.add("sidebar_opened");
sidebarElement.classList.remove("sidebar_closed");
}
for (const categoryNameElement of categoryNameElements) {
categoryNameElement.classList.toggle("category__name_ipad-visible");
}
mainLogoNameElement.classList.toggle("sidebar__main-logo-name_ipad-visible");
isOpened = !isOpened;
};
window.onscroll = () => {
const headerNameElement = document.querySelector(".header__name");
const searchElement = document.querySelector(".search");
const mediaQuery = "(max-width: 1024px)";
if (
document.documentElement.scrollTop > 25 &&
window.matchMedia(mediaQuery).matches
) {
headerNameElement.classList.add("header__name_hidden");
searchElement.classList.add("search_scrolled");
} else {
headerNameElement.classList.remove("header__name_hidden");
searchElement.classList.remove("search_scrolled");
}
};