source: frontend/src/components/Header.js@ 16237c4

Last change on this file since 16237c4 was 16237c4, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 22 months ago

Added Order Functionality
  • Property mode set to 100644
File size: 20.3 KB
Line 
1import React from "react";
2import logo from "../Images/logo.png";
3import "../styles/Header.css";
4import SearchIcon from "@mui/icons-material/Search";
5import AccountCircleIcon from "@mui/icons-material/AccountCircle";
6//import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
7import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
8import WeekendIcon from "@mui/icons-material/Weekend";
9import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
10import TableRestaurantIcon from "@mui/icons-material/TableRestaurant";
11import BedIcon from "@mui/icons-material/Bed";
12import KitchenIcon from "@mui/icons-material/Kitchen";
13import ChairAltIcon from "@mui/icons-material/ChairAlt";
14import BedroomChildIcon from "@mui/icons-material/BedroomChild";
15import DeckIcon from "@mui/icons-material/Deck";
16import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
17import MenuIcon from "@mui/icons-material/Menu";
18import { Link, NavLink, useNavigate } from "react-router-dom";
19import logo2 from "../Images/logo2.png";
20import Badge from "react-bootstrap/Badge";
21import ArrowBackIcon from "@mui/icons-material/ArrowBack";
22import { Store } from "../Store";
23import { useContext } from "react";
24import NavDropdown from "react-bootstrap/NavDropdown";
25
26const 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
33const 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
43const 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
51const closeMenu = (event) => {
52 let menu = document.querySelector(".mobile-menu-container");
53 menu.classList.remove("visible");
54 menu.classList.add("hidden");
55};
56
57const 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
65const 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
72function 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
593export default Header;
Note: See TracBrowser for help on using the repository browser.