1 | import React from "react";
|
---|
2 | import logo from "../Images/logo.png";
|
---|
3 | import "../styles/Header.css";
|
---|
4 | import SearchIcon from "@mui/icons-material/Search";
|
---|
5 | import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
---|
6 | //import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
|
---|
7 | import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
---|
8 | import WeekendIcon from "@mui/icons-material/Weekend";
|
---|
9 | import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
|
---|
10 | import TableRestaurantIcon from "@mui/icons-material/TableRestaurant";
|
---|
11 | import BedIcon from "@mui/icons-material/Bed";
|
---|
12 | import KitchenIcon from "@mui/icons-material/Kitchen";
|
---|
13 | import ChairAltIcon from "@mui/icons-material/ChairAlt";
|
---|
14 | import BedroomChildIcon from "@mui/icons-material/BedroomChild";
|
---|
15 | import DeckIcon from "@mui/icons-material/Deck";
|
---|
16 | import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
|
---|
17 | import MenuIcon from "@mui/icons-material/Menu";
|
---|
18 | import { Link } from "react-router-dom";
|
---|
19 | import logo2 from "../Images/logo2.png";
|
---|
20 | import Badge from "react-bootstrap/Badge";
|
---|
21 | import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
---|
22 | import { Store } from "../Store";
|
---|
23 | import { useContext } from "react";
|
---|
24 |
|
---|
25 | const toggleMenu = (event) => {
|
---|
26 | let menu = document.querySelector(".mobile-menu-container");
|
---|
27 | menu.classList.remove("hidden");
|
---|
28 | menu.classList.add("visible");
|
---|
29 | };
|
---|
30 |
|
---|
31 | const toggleSubMenu = (event) => {
|
---|
32 | let menu = document.querySelector(".subDropdown");
|
---|
33 | menu.classList.remove("hidden");
|
---|
34 | menu.classList.add("visible");
|
---|
35 | let tog = document.querySelector(".subMenu");
|
---|
36 | tog.removeAttribute("onClick");
|
---|
37 | console.log("SubMenu Visible");
|
---|
38 | };
|
---|
39 |
|
---|
40 | const categoryMenuTrigger = (event) => {
|
---|
41 | event.stopPropagation();
|
---|
42 | let span = event.target;
|
---|
43 | let menu = document.querySelector(`.${span.classList[0]}-menu`);
|
---|
44 | menu.classList.remove("hidden");
|
---|
45 | menu.classList.add("visible");
|
---|
46 | };
|
---|
47 |
|
---|
48 | const closeMenu = (event) => {
|
---|
49 | let menu = document.querySelector(".mobile-menu-container");
|
---|
50 | menu.classList.remove("visible");
|
---|
51 | menu.classList.add("hidden");
|
---|
52 | };
|
---|
53 |
|
---|
54 | const backToMenu = (event) => {
|
---|
55 | event.stopPropagation();
|
---|
56 | let menu1 = document.querySelector(".subDropdown");
|
---|
57 | menu1.classList.remove("visible");
|
---|
58 | menu1.classList.add("hidden");
|
---|
59 | console.log("SubMenu Invisible");
|
---|
60 | };
|
---|
61 |
|
---|
62 | const backToSubMenu = (event) => {
|
---|
63 | event.stopPropagation();
|
---|
64 | let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
|
---|
65 | menu.classList.remove("visible");
|
---|
66 | menu.classList.add("hidden");
|
---|
67 | };
|
---|
68 |
|
---|
69 | function Header() {
|
---|
70 | const { state } = useContext(Store);
|
---|
71 | const { cart } = state;
|
---|
72 | return (
|
---|
73 | <div className="header">
|
---|
74 | <div className="header__iconContainer">
|
---|
75 | <MenuIcon
|
---|
76 | className="header__icon"
|
---|
77 | fontSize="large"
|
---|
78 | onClick={toggleMenu}
|
---|
79 | />
|
---|
80 | <img className="header__icon" src={logo2} alt="logo"></img>
|
---|
81 | </div>
|
---|
82 | <div className="mobile-menu-container hidden">
|
---|
83 | <div className="closeBtn" onClick={closeMenu}>
|
---|
84 | x
|
---|
85 | </div>
|
---|
86 | <ul className="mobile-menu">
|
---|
87 | <li>Почетна</li>
|
---|
88 | <li onClick={toggleSubMenu} className="subMenu">
|
---|
89 | Производи <ArrowDropDownIcon />
|
---|
90 | <div className="subDropdown hidden">
|
---|
91 | <div className="backBtn" onClick={backToMenu}>
|
---|
92 | <ArrowBackIcon />
|
---|
93 | Назад
|
---|
94 | </div>
|
---|
95 | <ul className="mobile-submenu">
|
---|
96 | <li
|
---|
97 | className="category-menu-trigger"
|
---|
98 | onClick={categoryMenuTrigger}
|
---|
99 | >
|
---|
100 | <span className="dnevna">
|
---|
101 | <WeekendIcon /> Дневна
|
---|
102 | </span>
|
---|
103 | <div className="category-menu dnevna-menu hidden">
|
---|
104 | <div onClick={backToSubMenu} className="dnevna">
|
---|
105 | <ArrowBackIcon />
|
---|
106 | Назад
|
---|
107 | </div>
|
---|
108 | <ul>
|
---|
109 | <li>Аголни гарнитури</li>
|
---|
110 | <li>Софи</li>
|
---|
111 | <li>Фотелји</li>
|
---|
112 | <li>Табуретки</li>
|
---|
113 | <li>Клуб Маси</li>
|
---|
114 | <li>ТВ комоди</li>
|
---|
115 | <li>Комоди</li>
|
---|
116 | </ul>
|
---|
117 | </div>
|
---|
118 | </li>
|
---|
119 | <li
|
---|
120 | className="category-menu-trigger"
|
---|
121 | onClick={categoryMenuTrigger}
|
---|
122 | >
|
---|
123 | <span className="hodnik">
|
---|
124 | <MeetingRoomIcon />
|
---|
125 | Ходник
|
---|
126 | </span>
|
---|
127 | <div className="category-menu hodnik-menu hidden">
|
---|
128 | <div onClick={backToSubMenu} className="hodnik">
|
---|
129 | <ArrowBackIcon />
|
---|
130 | Назад
|
---|
131 | </div>
|
---|
132 | <ul>
|
---|
133 | <li>Шкафови за чевли</li>
|
---|
134 | <li>Закачалки и огледала</li>
|
---|
135 | <li>Колекции за ходник</li>
|
---|
136 | </ul>
|
---|
137 | </div>
|
---|
138 | </li>
|
---|
139 | <li
|
---|
140 | className="category-menu-trigger"
|
---|
141 | onClick={categoryMenuTrigger}
|
---|
142 | >
|
---|
143 | <span className="kujna">
|
---|
144 | <KitchenIcon />
|
---|
145 | Кујна
|
---|
146 | </span>
|
---|
147 | <div className="category-menu kujna-menu hidden">
|
---|
148 | <div onClick={backToSubMenu} className="kujna">
|
---|
149 | <ArrowBackIcon />
|
---|
150 | Назад
|
---|
151 | </div>
|
---|
152 | <ul>
|
---|
153 | <li>Кујнски аголни гарнитури</li>
|
---|
154 | <li>Стандардни кујни</li>
|
---|
155 | </ul>
|
---|
156 | </div>
|
---|
157 | </li>
|
---|
158 | <li
|
---|
159 | className="category-menu-trigger"
|
---|
160 | onClick={categoryMenuTrigger}
|
---|
161 | >
|
---|
162 | <span className="spalna">
|
---|
163 | <BedIcon />
|
---|
164 | Спална
|
---|
165 | </span>
|
---|
166 | <div className="category-menu spalna-menu hidden">
|
---|
167 | <div onClick={backToSubMenu} className="spalna">
|
---|
168 | <ArrowBackIcon />
|
---|
169 | Назад
|
---|
170 | </div>
|
---|
171 | <ul>
|
---|
172 | <li>Спални комплети</li>
|
---|
173 | <li>Лежаи</li>
|
---|
174 | <li>Кревети</li>
|
---|
175 | <li>Плакари</li>
|
---|
176 | <li>Ноќни шкафчиња</li>
|
---|
177 | <li>Тоалетни маси</li>
|
---|
178 | </ul>
|
---|
179 | </div>
|
---|
180 | </li>
|
---|
181 | <li
|
---|
182 | className="category-menu-trigger"
|
---|
183 | onClick={categoryMenuTrigger}
|
---|
184 | >
|
---|
185 | <span className="gradina">
|
---|
186 | <DeckIcon />
|
---|
187 | Градина
|
---|
188 | </span>
|
---|
189 | <div className="category-menu gradina-menu hidden">
|
---|
190 | <div onClick={backToSubMenu} className="gradina">
|
---|
191 | <ArrowBackIcon />
|
---|
192 | Назад
|
---|
193 | </div>
|
---|
194 | <ul>
|
---|
195 | <li>Градинарски комплети</li>
|
---|
196 | <li>Градинарски лулки</li>
|
---|
197 | <li>Градинарски чадори</li>
|
---|
198 | <li>Градинарски маси</li>
|
---|
199 | <li>Градинарски столови</li>
|
---|
200 | <li>Градинарско осветлување</li>
|
---|
201 | </ul>
|
---|
202 | </div>
|
---|
203 | </li>
|
---|
204 | <li
|
---|
205 | className="category-menu-trigger"
|
---|
206 | onClick={categoryMenuTrigger}
|
---|
207 | >
|
---|
208 | <span className="kancelarija">
|
---|
209 | <ChairAltIcon />
|
---|
210 | Канцеларија
|
---|
211 | </span>
|
---|
212 | <div className="category-menu kancelarija-menu hidden">
|
---|
213 | <div onClick={backToSubMenu} className="kancelarija">
|
---|
214 | <ArrowBackIcon />
|
---|
215 | Назад
|
---|
216 | </div>
|
---|
217 | <ul>
|
---|
218 | <li>Бироа</li>
|
---|
219 | <li>Канцелариски столови</li>
|
---|
220 | <li>Гејмерски столови</li>
|
---|
221 | <li>Канцелариски шкафови</li>
|
---|
222 | </ul>
|
---|
223 | </div>
|
---|
224 | </li>
|
---|
225 | <li
|
---|
226 | className="category-menu-trigger"
|
---|
227 | onClick={categoryMenuTrigger}
|
---|
228 | >
|
---|
229 | <span className="trpezarija">
|
---|
230 | <TableRestaurantIcon />
|
---|
231 | Трпезарија
|
---|
232 | </span>
|
---|
233 | <div className="category-menu trpezarija-menu hidden">
|
---|
234 | <div onClick={backToSubMenu} className="trpezarija">
|
---|
235 | <ArrowBackIcon />
|
---|
236 | Назад
|
---|
237 | </div>
|
---|
238 | <ul>
|
---|
239 | <li>Трпезариски маси</li>
|
---|
240 | <li>Трпезариски столови</li>
|
---|
241 | <li>Кујнски гарнитури</li>
|
---|
242 | <li>Бар столови и маси</li>
|
---|
243 | </ul>
|
---|
244 | </div>
|
---|
245 | </li>
|
---|
246 | <li
|
---|
247 | className="category-menu-trigger"
|
---|
248 | onClick={categoryMenuTrigger}
|
---|
249 | >
|
---|
250 | <span className="detska">
|
---|
251 | <BedroomChildIcon />
|
---|
252 | Детска соба
|
---|
253 | </span>
|
---|
254 | <div className="category-menu detska-menu hidden">
|
---|
255 | <div onClick={backToSubMenu} className="detska">
|
---|
256 | <ArrowBackIcon />
|
---|
257 | Назад
|
---|
258 | </div>
|
---|
259 | <ul>
|
---|
260 | <li>Колекции за детска соба</li>
|
---|
261 | <li>Детски бироа</li>
|
---|
262 | <li>Лежаи</li>
|
---|
263 | </ul>
|
---|
264 | </div>
|
---|
265 | </li>
|
---|
266 | </ul>
|
---|
267 | </div>
|
---|
268 | </li>
|
---|
269 | <li>За Нас</li>
|
---|
270 | <li>Контакти</li>
|
---|
271 | </ul>
|
---|
272 | </div>
|
---|
273 | <nav className="header__menu">
|
---|
274 | <img src={logo} alt="logo"></img>
|
---|
275 | <li>
|
---|
276 | <Link to={"/"} className="link">
|
---|
277 | Почетна
|
---|
278 | </Link>
|
---|
279 | </li>
|
---|
280 | <li className="header__products">
|
---|
281 | <span className="header__productsSpan">
|
---|
282 | Производи <ArrowDropDownIcon />
|
---|
283 | </span>
|
---|
284 | <div className="header__dropdown">
|
---|
285 | <div className="header__dropdownColumn">
|
---|
286 | <ul>
|
---|
287 | <li>
|
---|
288 | <a href="#">
|
---|
289 | <span>
|
---|
290 | <WeekendIcon /> Дневна
|
---|
291 | </span>
|
---|
292 | </a>
|
---|
293 | <ul>
|
---|
294 | <li>
|
---|
295 | <a href="#">Аголни гарнитури</a>
|
---|
296 | </li>
|
---|
297 | <li>
|
---|
298 | <a href="#">Софи</a>
|
---|
299 | </li>
|
---|
300 | <li>
|
---|
301 | <a href="#">Фотелји</a>
|
---|
302 | </li>
|
---|
303 | <li>
|
---|
304 | <a href="#">Табуретки</a>
|
---|
305 | </li>
|
---|
306 | <li>
|
---|
307 | <a href="#">Клуб Маси</a>
|
---|
308 | </li>
|
---|
309 | <li>
|
---|
310 | <a href="#">ТВ Комоди</a>
|
---|
311 | </li>
|
---|
312 | <li>
|
---|
313 | <a href="#">Комоди</a>
|
---|
314 | </li>
|
---|
315 | </ul>
|
---|
316 | </li>
|
---|
317 | <li>
|
---|
318 | <a href="#">
|
---|
319 | <span>
|
---|
320 | <MeetingRoomIcon />
|
---|
321 | Ходник
|
---|
322 | </span>
|
---|
323 | </a>
|
---|
324 | <ul>
|
---|
325 | <li>
|
---|
326 | <a href="#">Шкафови за чевли</a>
|
---|
327 | </li>
|
---|
328 | <li>
|
---|
329 | <a href="#">Закачалки и огледала</a>
|
---|
330 | </li>
|
---|
331 | <li>
|
---|
332 | <a href="#">Колекции за ходник</a>
|
---|
333 | </li>
|
---|
334 | </ul>
|
---|
335 | </li>
|
---|
336 | <li>
|
---|
337 | <a href="#">
|
---|
338 | <span>
|
---|
339 | <KitchenIcon />
|
---|
340 | Кујна
|
---|
341 | </span>
|
---|
342 | </a>
|
---|
343 | <ul>
|
---|
344 | <li>
|
---|
345 | <a href="#">Кујнски аголни гарнитури</a>
|
---|
346 | </li>
|
---|
347 | <li>
|
---|
348 | <a href="#">Стандардни кујни</a>
|
---|
349 | </li>
|
---|
350 | </ul>
|
---|
351 | </li>
|
---|
352 | </ul>
|
---|
353 | </div>
|
---|
354 | <div className="header__dropdownColumn">
|
---|
355 | <ul>
|
---|
356 | <li>
|
---|
357 | <a href="#">
|
---|
358 | <span>
|
---|
359 | <BedIcon />
|
---|
360 | Спална
|
---|
361 | </span>
|
---|
362 | </a>
|
---|
363 | <ul>
|
---|
364 | <li>
|
---|
365 | <a href="#">Спални комплети</a>
|
---|
366 | </li>
|
---|
367 |
|
---|
368 | <li>
|
---|
369 | <a href="#">Лежаи</a>
|
---|
370 | </li>
|
---|
371 |
|
---|
372 | <li>
|
---|
373 | <a href="#">Кревети</a>
|
---|
374 | </li>
|
---|
375 |
|
---|
376 | <li>
|
---|
377 | <a href="#">Плакари</a>
|
---|
378 | </li>
|
---|
379 | <li>
|
---|
380 | <a href="#">Ноќни шкафчиња</a>
|
---|
381 | </li>
|
---|
382 | <li>
|
---|
383 | <a href="#">Тоалетни маси</a>
|
---|
384 | </li>
|
---|
385 | </ul>
|
---|
386 | </li>
|
---|
387 | <li>
|
---|
388 | <a href="#">
|
---|
389 | <span>
|
---|
390 | <DeckIcon />
|
---|
391 | Мебел за градина
|
---|
392 | </span>
|
---|
393 | </a>
|
---|
394 | <ul>
|
---|
395 | <li>
|
---|
396 | <a href="#">Градинарски комплети</a>
|
---|
397 | </li>
|
---|
398 | <li>
|
---|
399 | <a href="#">Градинарски лулки</a>
|
---|
400 | </li>
|
---|
401 | <li>
|
---|
402 | <a href="#">Градинарски чадори</a>
|
---|
403 | </li>
|
---|
404 | <li>
|
---|
405 | <a href="#">Градинарски маси</a>
|
---|
406 | </li>
|
---|
407 | <li>
|
---|
408 | <a href="#">Градинарски столови</a>
|
---|
409 | </li>
|
---|
410 | <li>
|
---|
411 | <a href="#">Градинарско осветлување</a>
|
---|
412 | </li>
|
---|
413 | </ul>
|
---|
414 | </li>
|
---|
415 | </ul>
|
---|
416 | </div>
|
---|
417 | <div className="header__dropdownColumn">
|
---|
418 | <ul>
|
---|
419 | <li>
|
---|
420 | <a href="#">
|
---|
421 | <span>
|
---|
422 | <ChairAltIcon />
|
---|
423 | Канцеларија
|
---|
424 | </span>
|
---|
425 | </a>
|
---|
426 | <ul>
|
---|
427 | <li>
|
---|
428 | <a href="#">Бироа</a>
|
---|
429 | </li>
|
---|
430 | <li>
|
---|
431 | <a href="#">Канцелариски столови</a>
|
---|
432 | </li>
|
---|
433 | <li>
|
---|
434 | <a href="#">Гејмерски столови</a>
|
---|
435 | </li>
|
---|
436 | <li>
|
---|
437 | <a href="#">Канцелариски шкафови</a>
|
---|
438 | </li>
|
---|
439 | </ul>
|
---|
440 | </li>
|
---|
441 | <li>
|
---|
442 | <a href="#">
|
---|
443 | <span>
|
---|
444 | <TableRestaurantIcon />
|
---|
445 | Трпезарија
|
---|
446 | </span>
|
---|
447 | </a>
|
---|
448 | <ul>
|
---|
449 | <li>
|
---|
450 | <a href="#">Трпезариски маси</a>
|
---|
451 | </li>
|
---|
452 | <li>
|
---|
453 | <a href="#">Трпезариски столови</a>
|
---|
454 | </li>
|
---|
455 | <li>
|
---|
456 | <a href="#">Кујнски гарнитури</a>
|
---|
457 | </li>
|
---|
458 | <li>
|
---|
459 | <a href="#">Бар столови и маси</a>
|
---|
460 | </li>
|
---|
461 | </ul>
|
---|
462 | </li>
|
---|
463 | <li>
|
---|
464 | <a href="#">
|
---|
465 | <span>
|
---|
466 | <BedroomChildIcon />
|
---|
467 | Детска соба
|
---|
468 | </span>
|
---|
469 | </a>
|
---|
470 | <ul>
|
---|
471 | <li>
|
---|
472 | <a href="#">Колекции за детска соба</a>
|
---|
473 | </li>
|
---|
474 | <li>
|
---|
475 | <a href="#">Детски бироа</a>
|
---|
476 | </li>
|
---|
477 | <li>
|
---|
478 | <a href="#">Лежаи</a>
|
---|
479 | </li>
|
---|
480 | </ul>
|
---|
481 | </li>
|
---|
482 | </ul>
|
---|
483 | </div>
|
---|
484 | <div className="header__dropdownColumn">
|
---|
485 | <ul></ul>
|
---|
486 | </div>
|
---|
487 | </div>
|
---|
488 | </li>
|
---|
489 | <li className="header__aboutUs">За Нас</li>
|
---|
490 | <li className="header__contacts">Контакти</li>
|
---|
491 | </nav>
|
---|
492 | <div className="header__right">
|
---|
493 | <div className="header__buttons">
|
---|
494 | <span>
|
---|
495 | <AccountCircleIcon className="header__login" fontSize="large" />
|
---|
496 | <p>Најави се</p>
|
---|
497 | </span>
|
---|
498 | <Link to="/cart" className="badgee">
|
---|
499 | <span>
|
---|
500 | <ShoppingBasketIcon className="header__cart" fontSize="large" />
|
---|
501 |
|
---|
502 | {cart.cartItems.length > 0 && (
|
---|
503 | <Badge pill bg="danger">
|
---|
504 | {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
|
---|
505 | </Badge>
|
---|
506 | )}
|
---|
507 | </span>
|
---|
508 | </Link>
|
---|
509 | </div>
|
---|
510 | <div className="header__search">
|
---|
511 | <input className="header__searchInput" type="text" />
|
---|
512 | <SearchIcon className="header__searchIcon" fontSize="large" />
|
---|
513 | </div>
|
---|
514 | </div>
|
---|
515 | </div>
|
---|
516 | );
|
---|
517 | }
|
---|
518 |
|
---|
519 | export default Header;
|
---|