This repository was archived by the owner on Jun 12, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (169 loc) · 7.77 KB
/
index.html
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SibDev Test - адаптивный дизайн</title>
<link rel="stylesheet" href="./styles/index.css">
<script>
document.addEventListener("DOMContentLoaded", () => {
const button = document.querySelector("#button")
const sidebar = document.querySelector("#sidebar")
const sidebarFake = document.querySelector("#sidebar-fake")
const layout = document.querySelector("#layout")
const header = document.querySelector("#header")
const navItems = document.querySelectorAll(".nav-item")
const title = document.querySelector("#title")
button.addEventListener("click", toggleOpenSidebar)
layout.addEventListener("click", hideSidebar)
layout.addEventListener("scroll", handleScroll)
navItems.forEach(navItem => navItem.addEventListener("click", handleSelect))
function toggleOpenSidebar() {
sidebar.classList.toggle("closed")
sidebarFake.classList.toggle("closed")
}
function hideSidebar() {
sidebar.classList.add("closed")
sidebarFake.classList.add("closed")
}
let shouldHide = layout.scrollTop > 200
function handleScroll(e) {
const scroll = e.target.scrollTop
const shouldBeHidden = scroll > 200
if (shouldBeHidden !== shouldHide) {
// changed
shouldHide = shouldBeHidden
shouldHide
? header.classList.add("scroll")
: header.classList.remove("scroll")
console.log(shouldHide)
}
}
function handleSelect(e) {
navItems.forEach(navItem => navItem.classList.remove("active"))
e.currentTarget.classList.add("active")
const span = e.currentTarget.children[1]
const text = span.innerText
title.innerText = text
}
})
</script>
</head>
<body>
<div id="root">
<div class="layout" id="layout">
<aside class="sidebar closed fake" id="sidebar-fake"></aside>
<main>
<!-- i dont know how to repeat html =) -->
<div class="coupon">
<div class="coupon__image coupon-image-1"></div>
<div class="coupon__name">Пробка на Мира</div>
<div class="coupon__description">Вечер для двоих</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-2"></div>
<div class="coupon__name">кИНО И НЕМЦЫ</div>
<div class="coupon__description">Бесплатный бокал пива</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-3"></div>
<div class="coupon__name">valery cakes</div>
<div class="coupon__description">Торт</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-4"></div>
<div class="coupon__name">sushi sell</div>
<div class="coupon__description">Набор “Праздник”</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-5"></div>
<div class="coupon__name">mangosteen</div>
<div class="coupon__description">Фрукт в подарок</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-6"></div>
<div class="coupon__name">теленок табака</div>
<div class="coupon__description">Стейк “Мачете”</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-7"></div>
<div class="coupon__name">fire food</div>
<div class="coupon__description">Вторая шаурма в подарок</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
<div class="coupon">
<div class="coupon__image coupon-image-8"></div>
<div class="coupon__name">aroma cremeria</div>
<div class="coupon__description">Джелато “Пармезан”</div>
<div class="coupon__code">J123</div>
<div class="coupon__label">Купон</div>
<div class="coupon__box"></div>
</div>
</main>
<header class="--scroll" id="header">
<div class="header">
<h1 id="title">Развлечения</h1>
</div>
<div class="search">
<input type="text" placeholder="Какой магазин вам нужен?">
</div>
</header>
</div>
<div class="layout abs">
<aside class="sidebar closed" id="sidebar">
<div class="sidebar__head">
<div class="sidebar__head__logo"></div>
<div class="sidebar__head__company">BECO</div>
<div class="sidebar__head__button" id="button">
<i class="button-menu"></i>
</div>
</div>
<div class="sidebar__nav">
<div class="nav-item">
<i class="icon-catalog"></i>
<span>Каталог</span>
</div>
<div class="nav-item">
<i class="icon-health"></i>
<span>Здоровье</span>
</div>
<div class="nav-item">
<i class="icon-beauty"></i>
<span>Красота</span>
</div>
<div class="nav-item active">
<i class="icon-enjoy"></i>
<span>Развлечения</span>
</div>
<div class="nav-item">
<i class="icon-car"></i>
<span>Авто</span>
</div>
</div>
</aside>
</div>
</div>
</body>
</html>