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, NavLink, useNavigate } 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 | import NavDropdown from "react-bootstrap/NavDropdown";
|
---|
25 |
|
---|
26 | const toggleMenu = (event) => {
|
---|
27 | event.stopPropagation();
|
---|
28 | let menu = document.querySelector(".mobile-menu-container");
|
---|
29 | menu.classList.remove("hidden");
|
---|
30 | menu.classList.add("visible");
|
---|
31 | };
|
---|
32 |
|
---|
33 | const toggleSubMenu = (event) => {
|
---|
34 | event.stopPropagation();
|
---|
35 | let menu = document.querySelector(".subDropdown");
|
---|
36 | menu.classList.remove("hidden");
|
---|
37 | menu.classList.add("visible");
|
---|
38 | let tog = document.querySelector(".subMenu");
|
---|
39 | tog.removeAttribute("onClick");
|
---|
40 | console.log("SubMenu Visible");
|
---|
41 | };
|
---|
42 |
|
---|
43 | const categoryMenuTrigger = (event) => {
|
---|
44 | event.stopPropagation();
|
---|
45 | let span = event.target;
|
---|
46 | let menu = document.querySelector(`.${span.classList[0]}-menu`);
|
---|
47 | menu.classList.remove("hidden");
|
---|
48 | menu.classList.add("visible");
|
---|
49 | };
|
---|
50 |
|
---|
51 | const closeMenu = (event) => {
|
---|
52 | let menu = document.querySelector(".mobile-menu-container");
|
---|
53 | menu.classList.remove("visible");
|
---|
54 | menu.classList.add("hidden");
|
---|
55 | };
|
---|
56 |
|
---|
57 | const backToMenu = (event) => {
|
---|
58 | event.stopPropagation();
|
---|
59 | let menu1 = document.querySelector(".subDropdown");
|
---|
60 | menu1.classList.remove("visible");
|
---|
61 | menu1.classList.add("hidden");
|
---|
62 | console.log("SubMenu Invisible");
|
---|
63 | };
|
---|
64 |
|
---|
65 | const backToSubMenu = (event) => {
|
---|
66 | event.stopPropagation();
|
---|
67 | let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
|
---|
68 | menu.classList.remove("visible");
|
---|
69 | menu.classList.add("hidden");
|
---|
70 | };
|
---|
71 |
|
---|
72 | function Header() {
|
---|
73 | const { state, dispatch: ctxDispatch } = useContext(Store);
|
---|
74 | const { cart, userInfo } = state;
|
---|
75 | const navigate = useNavigate();
|
---|
76 |
|
---|
77 | const signoutHandler = () => {
|
---|
78 | ctxDispatch({ type: "USER_SIGNOUT" });
|
---|
79 | localStorage.removeItem("userInfo");
|
---|
80 | localStorage.removeItem("shippingAddress");
|
---|
81 | localStorage.removeItem("paymentMethod");
|
---|
82 | };
|
---|
83 |
|
---|
84 | return (
|
---|
85 | <div className="header">
|
---|
86 | <div className="header__iconContainer">
|
---|
87 | <MenuIcon
|
---|
88 | className="header__icon"
|
---|
89 | fontSize="large"
|
---|
90 | onClick={toggleMenu}
|
---|
91 | />
|
---|
92 | <img
|
---|
93 | className="header__icon"
|
---|
94 | src={logo2}
|
---|
95 | alt="logo"
|
---|
96 | onClick={() => {
|
---|
97 | navigate("/");
|
---|
98 | }}
|
---|
99 | ></img>
|
---|
100 | </div>
|
---|
101 | <div className="mobile-menu-container hidden">
|
---|
102 | <div className="closeBtn" onClick={closeMenu}>
|
---|
103 | x
|
---|
104 | </div>
|
---|
105 | <ul className="mobile-menu">
|
---|
106 | <Link
|
---|
107 | to="/"
|
---|
108 | style={{ textDecoration: "none", color: "black" }}
|
---|
109 | onClick={closeMenu}
|
---|
110 | >
|
---|
111 | <li>Почетна</li>
|
---|
112 | </Link>
|
---|
113 | <li onClick={toggleSubMenu} className="subMenu">
|
---|
114 | Производи <ArrowDropDownIcon />
|
---|
115 | <div className="subDropdown hidden">
|
---|
116 | <div className="backBtn" onClick={backToMenu}>
|
---|
117 | <ArrowBackIcon />
|
---|
118 | Назад
|
---|
119 | </div>
|
---|
120 | <ul className="mobile-submenu">
|
---|
121 | <li
|
---|
122 | className="category-menu-trigger"
|
---|
123 | onClick={categoryMenuTrigger}
|
---|
124 | >
|
---|
125 | <span className="dnevna">
|
---|
126 | <WeekendIcon /> Дневна
|
---|
127 | </span>
|
---|
128 | <div className="category-menu dnevna-menu hidden">
|
---|
129 | <div onClick={backToSubMenu} className="dnevna">
|
---|
130 | <ArrowBackIcon />
|
---|
131 | Назад
|
---|
132 | </div>
|
---|
133 | <ul>
|
---|
134 | <li>Аголни гарнитури</li>
|
---|
135 | <li>Софи</li>
|
---|
136 | <li>Фотелји</li>
|
---|
137 | <li>Табуретки</li>
|
---|
138 | <li>Клуб Маси</li>
|
---|
139 | <li>ТВ комоди</li>
|
---|
140 | <li>Комоди</li>
|
---|
141 | </ul>
|
---|
142 | </div>
|
---|
143 | </li>
|
---|
144 | <li
|
---|
145 | className="category-menu-trigger"
|
---|
146 | onClick={categoryMenuTrigger}
|
---|
147 | >
|
---|
148 | <span className="hodnik">
|
---|
149 | <MeetingRoomIcon />
|
---|
150 | Ходник
|
---|
151 | </span>
|
---|
152 | <div className="category-menu hodnik-menu hidden">
|
---|
153 | <div onClick={backToSubMenu} className="hodnik">
|
---|
154 | <ArrowBackIcon />
|
---|
155 | Назад
|
---|
156 | </div>
|
---|
157 | <ul>
|
---|
158 | <li>Шкафови за чевли</li>
|
---|
159 | <li>Закачалки и огледала</li>
|
---|
160 | <li>Колекции за ходник</li>
|
---|
161 | </ul>
|
---|
162 | </div>
|
---|
163 | </li>
|
---|
164 | <li
|
---|
165 | className="category-menu-trigger"
|
---|
166 | onClick={categoryMenuTrigger}
|
---|
167 | >
|
---|
168 | <span className="kujna">
|
---|
169 | <KitchenIcon />
|
---|
170 | Кујна
|
---|
171 | </span>
|
---|
172 | <div className="category-menu kujna-menu hidden">
|
---|
173 | <div onClick={backToSubMenu} className="kujna">
|
---|
174 | <ArrowBackIcon />
|
---|
175 | Назад
|
---|
176 | </div>
|
---|
177 | <ul>
|
---|
178 | <li>Кујнски аголни гарнитури</li>
|
---|
179 | <li>Стандардни кујни</li>
|
---|
180 | </ul>
|
---|
181 | </div>
|
---|
182 | </li>
|
---|
183 | <li
|
---|
184 | className="category-menu-trigger"
|
---|
185 | onClick={categoryMenuTrigger}
|
---|
186 | >
|
---|
187 | <span className="spalna">
|
---|
188 | <BedIcon />
|
---|
189 | Спална
|
---|
190 | </span>
|
---|
191 | <div className="category-menu spalna-menu hidden">
|
---|
192 | <div onClick={backToSubMenu} className="spalna">
|
---|
193 | <ArrowBackIcon />
|
---|
194 | Назад
|
---|
195 | </div>
|
---|
196 | <ul>
|
---|
197 | <li>Спални комплети</li>
|
---|
198 | <li>Лежаи</li>
|
---|
199 | <li>Кревети</li>
|
---|
200 | <li>Плакари</li>
|
---|
201 | <li>Ноќни шкафчиња</li>
|
---|
202 | <li>Тоалетни маси</li>
|
---|
203 | </ul>
|
---|
204 | </div>
|
---|
205 | </li>
|
---|
206 | <li
|
---|
207 | className="category-menu-trigger"
|
---|
208 | onClick={categoryMenuTrigger}
|
---|
209 | >
|
---|
210 | <span className="gradina">
|
---|
211 | <DeckIcon />
|
---|
212 | Градина
|
---|
213 | </span>
|
---|
214 | <div className="category-menu gradina-menu hidden">
|
---|
215 | <div onClick={backToSubMenu} className="gradina">
|
---|
216 | <ArrowBackIcon />
|
---|
217 | Назад
|
---|
218 | </div>
|
---|
219 | <ul>
|
---|
220 | <li>Градинарски комплети</li>
|
---|
221 | <li>Градинарски лулки</li>
|
---|
222 | <li>Градинарски чадори</li>
|
---|
223 | <li>Градинарски маси</li>
|
---|
224 | <li>Градинарски столови</li>
|
---|
225 | <li>Градинарско осветлување</li>
|
---|
226 | </ul>
|
---|
227 | </div>
|
---|
228 | </li>
|
---|
229 | <li
|
---|
230 | className="category-menu-trigger"
|
---|
231 | onClick={categoryMenuTrigger}
|
---|
232 | >
|
---|
233 | <span className="kancelarija">
|
---|
234 | <ChairAltIcon />
|
---|
235 | Канцеларија
|
---|
236 | </span>
|
---|
237 | <div className="category-menu kancelarija-menu hidden">
|
---|
238 | <div onClick={backToSubMenu} className="kancelarija">
|
---|
239 | <ArrowBackIcon />
|
---|
240 | Назад
|
---|
241 | </div>
|
---|
242 | <ul>
|
---|
243 | <li>Бироа</li>
|
---|
244 | <li>Канцелариски столови</li>
|
---|
245 | <li>Гејмерски столови</li>
|
---|
246 | <li>Канцелариски шкафови</li>
|
---|
247 | </ul>
|
---|
248 | </div>
|
---|
249 | </li>
|
---|
250 | <li
|
---|
251 | className="category-menu-trigger"
|
---|
252 | onClick={categoryMenuTrigger}
|
---|
253 | >
|
---|
254 | <span className="trpezarija">
|
---|
255 | <TableRestaurantIcon />
|
---|
256 | Трпезарија
|
---|
257 | </span>
|
---|
258 | <div className="category-menu trpezarija-menu hidden">
|
---|
259 | <div onClick={backToSubMenu} className="trpezarija">
|
---|
260 | <ArrowBackIcon />
|
---|
261 | Назад
|
---|
262 | </div>
|
---|
263 | <ul>
|
---|
264 | <li>Трпезариски маси</li>
|
---|
265 | <li>Трпезариски столови</li>
|
---|
266 | <li>Кујнски гарнитури</li>
|
---|
267 | <li>Бар столови и маси</li>
|
---|
268 | </ul>
|
---|
269 | </div>
|
---|
270 | </li>
|
---|
271 | <li
|
---|
272 | className="category-menu-trigger"
|
---|
273 | onClick={categoryMenuTrigger}
|
---|
274 | >
|
---|
275 | <span className="detska">
|
---|
276 | <BedroomChildIcon />
|
---|
277 | Детска соба
|
---|
278 | </span>
|
---|
279 | <div className="category-menu detska-menu hidden">
|
---|
280 | <div onClick={backToSubMenu} className="detska">
|
---|
281 | <ArrowBackIcon />
|
---|
282 | Назад
|
---|
283 | </div>
|
---|
284 | <ul>
|
---|
285 | <li>Колекции за детска соба</li>
|
---|
286 | <li>Детски бироа</li>
|
---|
287 | <li>Лежаи</li>
|
---|
288 | </ul>
|
---|
289 | </div>
|
---|
290 | </li>
|
---|
291 | </ul>
|
---|
292 | </div>
|
---|
293 | </li>
|
---|
294 | <li>За Нас</li>
|
---|
295 | <li>Контакти</li>
|
---|
296 | </ul>
|
---|
297 | </div>
|
---|
298 | <nav className="header__menu">
|
---|
299 | <img src={logo} alt="logo"></img>
|
---|
300 | <li>
|
---|
301 | <Link to={"/"} className="link">
|
---|
302 | Почетна
|
---|
303 | </Link>
|
---|
304 | </li>
|
---|
305 | <li className="header__products">
|
---|
306 | <span className="header__productsSpan">
|
---|
307 | Производи <ArrowDropDownIcon />
|
---|
308 | </span>
|
---|
309 | <div className="header__dropdown">
|
---|
310 | <div className="header__dropdownColumn">
|
---|
311 | <ul>
|
---|
312 | <li>
|
---|
313 | <a href="#">
|
---|
314 | <span>
|
---|
315 | <WeekendIcon /> Дневна
|
---|
316 | </span>
|
---|
317 | </a>
|
---|
318 | <ul>
|
---|
319 | <li>
|
---|
320 | <a href="#">Аголни гарнитури</a>
|
---|
321 | </li>
|
---|
322 | <li>
|
---|
323 | <a href="#">Софи</a>
|
---|
324 | </li>
|
---|
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 | <li>
|
---|
335 | <a href="#">ТВ Комоди</a>
|
---|
336 | </li>
|
---|
337 | <li>
|
---|
338 | <a href="#">Комоди</a>
|
---|
339 | </li>
|
---|
340 | </ul>
|
---|
341 | </li>
|
---|
342 | <li>
|
---|
343 | <a href="#">
|
---|
344 | <span>
|
---|
345 | <MeetingRoomIcon />
|
---|
346 | Ходник
|
---|
347 | </span>
|
---|
348 | </a>
|
---|
349 | <ul>
|
---|
350 | <li>
|
---|
351 | <a href="#">Шкафови за чевли</a>
|
---|
352 | </li>
|
---|
353 | <li>
|
---|
354 | <a href="#">Закачалки и огледала</a>
|
---|
355 | </li>
|
---|
356 | <li>
|
---|
357 | <a href="#">Колекции за ходник</a>
|
---|
358 | </li>
|
---|
359 | </ul>
|
---|
360 | </li>
|
---|
361 | <li>
|
---|
362 | <a href="#">
|
---|
363 | <span>
|
---|
364 | <KitchenIcon />
|
---|
365 | Кујна
|
---|
366 | </span>
|
---|
367 | </a>
|
---|
368 | <ul>
|
---|
369 | <li>
|
---|
370 | <a href="#">Кујнски аголни гарнитури</a>
|
---|
371 | </li>
|
---|
372 | <li>
|
---|
373 | <a href="#">Стандардни кујни</a>
|
---|
374 | </li>
|
---|
375 | </ul>
|
---|
376 | </li>
|
---|
377 | </ul>
|
---|
378 | </div>
|
---|
379 | <div className="header__dropdownColumn">
|
---|
380 | <ul>
|
---|
381 | <li>
|
---|
382 | <a href="#">
|
---|
383 | <span>
|
---|
384 | <BedIcon />
|
---|
385 | Спална
|
---|
386 | </span>
|
---|
387 | </a>
|
---|
388 | <ul>
|
---|
389 | <li>
|
---|
390 | <a href="#">Спални комплети</a>
|
---|
391 | </li>
|
---|
392 |
|
---|
393 | <li>
|
---|
394 | <a href="#">Лежаи</a>
|
---|
395 | </li>
|
---|
396 |
|
---|
397 | <li>
|
---|
398 | <a href="#">Кревети</a>
|
---|
399 | </li>
|
---|
400 |
|
---|
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 | </ul>
|
---|
411 | </li>
|
---|
412 | <li>
|
---|
413 | <a href="#">
|
---|
414 | <span>
|
---|
415 | <DeckIcon />
|
---|
416 | Мебел за градина
|
---|
417 | </span>
|
---|
418 | </a>
|
---|
419 | <ul>
|
---|
420 | <li>
|
---|
421 | <a href="#">Градинарски комплети</a>
|
---|
422 | </li>
|
---|
423 | <li>
|
---|
424 | <a href="#">Градинарски лулки</a>
|
---|
425 | </li>
|
---|
426 | <li>
|
---|
427 | <a href="#">Градинарски чадори</a>
|
---|
428 | </li>
|
---|
429 | <li>
|
---|
430 | <a href="#">Градинарски маси</a>
|
---|
431 | </li>
|
---|
432 | <li>
|
---|
433 | <a href="#">Градинарски столови</a>
|
---|
434 | </li>
|
---|
435 | <li>
|
---|
436 | <a href="#">Градинарско осветлување</a>
|
---|
437 | </li>
|
---|
438 | </ul>
|
---|
439 | </li>
|
---|
440 | </ul>
|
---|
441 | </div>
|
---|
442 | <div className="header__dropdownColumn">
|
---|
443 | <ul>
|
---|
444 | <li>
|
---|
445 | <a href="#">
|
---|
446 | <span>
|
---|
447 | <ChairAltIcon />
|
---|
448 | Канцеларија
|
---|
449 | </span>
|
---|
450 | </a>
|
---|
451 | <ul>
|
---|
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 | <li>
|
---|
462 | <a href="#">Канцелариски шкафови</a>
|
---|
463 | </li>
|
---|
464 | </ul>
|
---|
465 | </li>
|
---|
466 | <li>
|
---|
467 | <a href="#">
|
---|
468 | <span>
|
---|
469 | <TableRestaurantIcon />
|
---|
470 | Трпезарија
|
---|
471 | </span>
|
---|
472 | </a>
|
---|
473 | <ul>
|
---|
474 | <li>
|
---|
475 | <a href="#">Трпезариски маси</a>
|
---|
476 | </li>
|
---|
477 | <li>
|
---|
478 | <a href="#">Трпезариски столови</a>
|
---|
479 | </li>
|
---|
480 | <li>
|
---|
481 | <a href="#">Кујнски гарнитури</a>
|
---|
482 | </li>
|
---|
483 | <li>
|
---|
484 | <a href="#">Бар столови и маси</a>
|
---|
485 | </li>
|
---|
486 | </ul>
|
---|
487 | </li>
|
---|
488 | <li>
|
---|
489 | <a href="#">
|
---|
490 | <span>
|
---|
491 | <BedroomChildIcon />
|
---|
492 | Детска соба
|
---|
493 | </span>
|
---|
494 | </a>
|
---|
495 | <ul>
|
---|
496 | <li>
|
---|
497 | <a href="#">Колекции за детска соба</a>
|
---|
498 | </li>
|
---|
499 | <li>
|
---|
500 | <a href="#">Детски бироа</a>
|
---|
501 | </li>
|
---|
502 | <li>
|
---|
503 | <a href="#">Лежаи</a>
|
---|
504 | </li>
|
---|
505 | </ul>
|
---|
506 | </li>
|
---|
507 | </ul>
|
---|
508 | </div>
|
---|
509 | <div className="header__dropdownColumn">
|
---|
510 | <ul></ul>
|
---|
511 | </div>
|
---|
512 | </div>
|
---|
513 | </li>
|
---|
514 | <li className="header__aboutUs">За Нас</li>
|
---|
515 | <li className="header__contacts">Контакти</li>
|
---|
516 | </nav>
|
---|
517 | <div className="header__right">
|
---|
518 | <div className="header__buttons">
|
---|
519 | {userInfo ? (
|
---|
520 | <NavDropdown
|
---|
521 | title={
|
---|
522 | <span>
|
---|
523 | <AccountCircleIcon
|
---|
524 | className="header__login"
|
---|
525 | fontSize="large"
|
---|
526 | />
|
---|
527 | <p>{userInfo.name}</p>
|
---|
528 | </span>
|
---|
529 | }
|
---|
530 | id="basic-nav-dropdown"
|
---|
531 | >
|
---|
532 | <NavDropdown.Item
|
---|
533 | onClick={() => {
|
---|
534 | navigate("/profile");
|
---|
535 | }}
|
---|
536 | >
|
---|
537 | Профил
|
---|
538 | </NavDropdown.Item>
|
---|
539 |
|
---|
540 | <NavDropdown.Item
|
---|
541 | onClick={() => {
|
---|
542 | navigate("/orderhistory");
|
---|
543 | }}
|
---|
544 | >
|
---|
545 | Нарачки
|
---|
546 | </NavDropdown.Item>
|
---|
547 |
|
---|
548 | <NavDropdown.Divider />
|
---|
549 | <Link
|
---|
550 | className="drowdown-item"
|
---|
551 | to="#signout"
|
---|
552 | onClick={signoutHandler}
|
---|
553 | >
|
---|
554 | Одјави се
|
---|
555 | </Link>
|
---|
556 | </NavDropdown>
|
---|
557 | ) : (
|
---|
558 | <Link
|
---|
559 | to={"/signin"}
|
---|
560 | className="link"
|
---|
561 | onClick={() => {
|
---|
562 | navigate("/orderhistory");
|
---|
563 | }}
|
---|
564 | >
|
---|
565 | <span>
|
---|
566 | <AccountCircleIcon className="header__login" fontSize="large" />
|
---|
567 | <p>Најави се</p>
|
---|
568 | </span>
|
---|
569 | </Link>
|
---|
570 | )}
|
---|
571 |
|
---|
572 | <Link to="/cart" className="badgee">
|
---|
573 | <span>
|
---|
574 | <ShoppingBasketIcon className="header__cart" fontSize="large" />
|
---|
575 |
|
---|
576 | {cart.cartItems.length > 0 && (
|
---|
577 | <Badge pill bg="danger">
|
---|
578 | {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
|
---|
579 | </Badge>
|
---|
580 | )}
|
---|
581 | </span>
|
---|
582 | </Link>
|
---|
583 | </div>
|
---|
584 | <div className="header__search">
|
---|
585 | <input className="header__searchInput" type="text" />
|
---|
586 | <SearchIcon className="header__searchIcon" fontSize="large" />
|
---|
587 | </div>
|
---|
588 | </div>
|
---|
589 | </div>
|
---|
590 | );
|
---|
591 | }
|
---|
592 |
|
---|
593 | export default Header;
|
---|