source: frontend/src/components/Header.js@ 55ed171

Last change on this file since 55ed171 was 55ed171, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 21 months ago

Full Admin Functionality Added
  • Property mode set to 100644
File size: 21.5 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 window.location.href = "/signin";
83 };
84
85 return (
86 <div className="header">
87 <div className="header__iconContainer">
88 <MenuIcon
89 className="header__icon"
90 fontSize="large"
91 onClick={toggleMenu}
92 />
93 <img
94 className="header__icon"
95 src={logo2}
96 alt="logo"
97 onClick={() => {
98 navigate("/");
99 }}
100 ></img>
101 </div>
102 <div className="mobile-menu-container hidden">
103 <div className="closeBtn" onClick={closeMenu}>
104 x
105 </div>
106 <ul className="mobile-menu">
107 <Link
108 to="/"
109 style={{ textDecoration: "none", color: "black" }}
110 onClick={closeMenu}
111 >
112 <li>Почетна</li>
113 </Link>
114 <li onClick={toggleSubMenu} className="subMenu">
115 Производи <ArrowDropDownIcon />
116 <div className="subDropdown hidden">
117 <div className="backBtn" onClick={backToMenu}>
118 <ArrowBackIcon />
119 Назад
120 </div>
121 <ul className="mobile-submenu">
122 <li
123 className="category-menu-trigger"
124 onClick={categoryMenuTrigger}
125 >
126 <span className="dnevna">
127 <WeekendIcon /> Дневна
128 </span>
129 <div className="category-menu dnevna-menu hidden">
130 <div onClick={backToSubMenu} className="dnevna">
131 <ArrowBackIcon />
132 Назад
133 </div>
134 <ul>
135 <li>Аголни гарнитури</li>
136 <li>Софи</li>
137 <li>Фотелји</li>
138 <li>Табуретки</li>
139 <li>Клуб Маси</li>
140 <li>ТВ комоди</li>
141 <li>Комоди</li>
142 </ul>
143 </div>
144 </li>
145 <li
146 className="category-menu-trigger"
147 onClick={categoryMenuTrigger}
148 >
149 <span className="hodnik">
150 <MeetingRoomIcon />
151 Ходник
152 </span>
153 <div className="category-menu hodnik-menu hidden">
154 <div onClick={backToSubMenu} className="hodnik">
155 <ArrowBackIcon />
156 Назад
157 </div>
158 <ul>
159 <li>Шкафови за чевли</li>
160 <li>Закачалки и огледала</li>
161 <li>Колекции за ходник</li>
162 </ul>
163 </div>
164 </li>
165 <li
166 className="category-menu-trigger"
167 onClick={categoryMenuTrigger}
168 >
169 <span className="kujna">
170 <KitchenIcon />
171 Кујна
172 </span>
173 <div className="category-menu kujna-menu hidden">
174 <div onClick={backToSubMenu} className="kujna">
175 <ArrowBackIcon />
176 Назад
177 </div>
178 <ul>
179 <li>Кујнски аголни гарнитури</li>
180 <li>Стандардни кујни</li>
181 </ul>
182 </div>
183 </li>
184 <li
185 className="category-menu-trigger"
186 onClick={categoryMenuTrigger}
187 >
188 <span className="spalna">
189 <BedIcon />
190 Спална
191 </span>
192 <div className="category-menu spalna-menu hidden">
193 <div onClick={backToSubMenu} className="spalna">
194 <ArrowBackIcon />
195 Назад
196 </div>
197 <ul>
198 <li>Спални комплети</li>
199 <li>Лежаи</li>
200 <li>Кревети</li>
201 <li>Плакари</li>
202 <li>Ноќни шкафчиња</li>
203 <li>Тоалетни маси</li>
204 </ul>
205 </div>
206 </li>
207 <li
208 className="category-menu-trigger"
209 onClick={categoryMenuTrigger}
210 >
211 <span className="gradina">
212 <DeckIcon />
213 Градина
214 </span>
215 <div className="category-menu gradina-menu hidden">
216 <div onClick={backToSubMenu} className="gradina">
217 <ArrowBackIcon />
218 Назад
219 </div>
220 <ul>
221 <li>Градинарски комплети</li>
222 <li>Градинарски лулки</li>
223 <li>Градинарски чадори</li>
224 <li>Градинарски маси</li>
225 <li>Градинарски столови</li>
226 <li>Градинарско осветлување</li>
227 </ul>
228 </div>
229 </li>
230 <li
231 className="category-menu-trigger"
232 onClick={categoryMenuTrigger}
233 >
234 <span className="kancelarija">
235 <ChairAltIcon />
236 Канцеларија
237 </span>
238 <div className="category-menu kancelarija-menu hidden">
239 <div onClick={backToSubMenu} className="kancelarija">
240 <ArrowBackIcon />
241 Назад
242 </div>
243 <ul>
244 <li>Бироа</li>
245 <li>Канцелариски столови</li>
246 <li>Гејмерски столови</li>
247 <li>Канцелариски шкафови</li>
248 </ul>
249 </div>
250 </li>
251 <li
252 className="category-menu-trigger"
253 onClick={categoryMenuTrigger}
254 >
255 <span className="trpezarija">
256 <TableRestaurantIcon />
257 Трпезарија
258 </span>
259 <div className="category-menu trpezarija-menu hidden">
260 <div onClick={backToSubMenu} className="trpezarija">
261 <ArrowBackIcon />
262 Назад
263 </div>
264 <ul>
265 <li>Трпезариски маси</li>
266 <li>Трпезариски столови</li>
267 <li>Кујнски гарнитури</li>
268 <li>Бар столови и маси</li>
269 </ul>
270 </div>
271 </li>
272 <li
273 className="category-menu-trigger"
274 onClick={categoryMenuTrigger}
275 >
276 <span className="detska">
277 <BedroomChildIcon />
278 Детска соба
279 </span>
280 <div className="category-menu detska-menu hidden">
281 <div onClick={backToSubMenu} className="detska">
282 <ArrowBackIcon />
283 Назад
284 </div>
285 <ul>
286 <li>Колекции за детска соба</li>
287 <li>Детски бироа</li>
288 <li>Лежаи</li>
289 </ul>
290 </div>
291 </li>
292 </ul>
293 </div>
294 </li>
295 <li>За Нас</li>
296 <li>Контакти</li>
297 </ul>
298 </div>
299 <nav className="header__menu">
300 <img src={logo} alt="logo"></img>
301 <li>
302 <Link to={"/"} className="link">
303 Почетна
304 </Link>
305 </li>
306 <li className="header__products">
307 <span className="header__productsSpan">
308 Производи <ArrowDropDownIcon />
309 </span>
310 <div className="header__dropdown">
311 <div className="header__dropdownColumn">
312 <ul>
313 <li>
314 <a href="#">
315 <span>
316 <WeekendIcon /> Дневна
317 </span>
318 </a>
319 <ul>
320 <li>
321 <a href="#">Аголни гарнитури</a>
322 </li>
323 <li>
324 <a href="#">Софи</a>
325 </li>
326 <li>
327 <a href="#">Фотелји</a>
328 </li>
329 <li>
330 <a href="#">Табуретки</a>
331 </li>
332 <li>
333 <a href="#">Клуб Маси</a>
334 </li>
335 <li>
336 <a href="#">ТВ Комоди</a>
337 </li>
338 <li>
339 <a href="#">Комоди</a>
340 </li>
341 </ul>
342 </li>
343 <li>
344 <a href="#">
345 <span>
346 <MeetingRoomIcon />
347 Ходник
348 </span>
349 </a>
350 <ul>
351 <li>
352 <a href="#">Шкафови за чевли</a>
353 </li>
354 <li>
355 <a href="#">Закачалки и огледала</a>
356 </li>
357 <li>
358 <a href="#">Колекции за ходник</a>
359 </li>
360 </ul>
361 </li>
362 <li>
363 <a href="#">
364 <span>
365 <KitchenIcon />
366 Кујна
367 </span>
368 </a>
369 <ul>
370 <li>
371 <a href="#">Кујнски аголни гарнитури</a>
372 </li>
373 <li>
374 <a href="#">Стандардни кујни</a>
375 </li>
376 </ul>
377 </li>
378 </ul>
379 </div>
380 <div className="header__dropdownColumn">
381 <ul>
382 <li>
383 <a href="#">
384 <span>
385 <BedIcon />
386 Спална
387 </span>
388 </a>
389 <ul>
390 <li>
391 <a href="#">Спални комплети</a>
392 </li>
393
394 <li>
395 <a href="#">Лежаи</a>
396 </li>
397
398 <li>
399 <a href="#">Кревети</a>
400 </li>
401
402 <li>
403 <a href="#">Плакари</a>
404 </li>
405 <li>
406 <a href="#">Ноќни шкафчиња</a>
407 </li>
408 <li>
409 <a href="#">Тоалетни маси</a>
410 </li>
411 </ul>
412 </li>
413 <li>
414 <a href="#">
415 <span>
416 <DeckIcon />
417 Мебел за градина
418 </span>
419 </a>
420 <ul>
421 <li>
422 <a href="#">Градинарски комплети</a>
423 </li>
424 <li>
425 <a href="#">Градинарски лулки</a>
426 </li>
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 </ul>
442 </div>
443 <div className="header__dropdownColumn">
444 <ul>
445 <li>
446 <a href="#">
447 <span>
448 <ChairAltIcon />
449 Канцеларија
450 </span>
451 </a>
452 <ul>
453 <li>
454 <a href="#">Бироа</a>
455 </li>
456 <li>
457 <a href="#">Канцелариски столови</a>
458 </li>
459 <li>
460 <a href="#">Гејмерски столови</a>
461 </li>
462 <li>
463 <a href="#">Канцелариски шкафови</a>
464 </li>
465 </ul>
466 </li>
467 <li>
468 <a href="#">
469 <span>
470 <TableRestaurantIcon />
471 Трпезарија
472 </span>
473 </a>
474 <ul>
475 <li>
476 <a href="#">Трпезариски маси</a>
477 </li>
478 <li>
479 <a href="#">Трпезариски столови</a>
480 </li>
481 <li>
482 <a href="#">Кујнски гарнитури</a>
483 </li>
484 <li>
485 <a href="#">Бар столови и маси</a>
486 </li>
487 </ul>
488 </li>
489 <li>
490 <a href="#">
491 <span>
492 <BedroomChildIcon />
493 Детска соба
494 </span>
495 </a>
496 <ul>
497 <li>
498 <a href="#">Колекции за детска соба</a>
499 </li>
500 <li>
501 <a href="#">Детски бироа</a>
502 </li>
503 <li>
504 <a href="#">Лежаи</a>
505 </li>
506 </ul>
507 </li>
508 </ul>
509 </div>
510 <div className="header__dropdownColumn">
511 <ul></ul>
512 </div>
513 </div>
514 </li>
515 <li className="header__aboutUs">За Нас</li>
516 <li className="header__contacts">Контакти</li>
517 </nav>
518 <div className="header__right">
519 <div className="header__buttons">
520 {userInfo && userInfo.isAdmin && (
521 <NavDropdown
522 title={
523 <span>
524 <AccountCircleIcon
525 className="header__login"
526 fontSize="large"
527 />
528 <p>{userInfo.name}</p>
529 </span>
530 }
531 id="basic-nav-dropdown"
532 >
533 <NavDropdown.Item
534 onClick={() => {
535 navigate("/profile");
536 }}
537 >
538 Профил
539 </NavDropdown.Item>
540
541 <NavDropdown.Item
542 onClick={() => {
543 navigate("/admin/dashboard");
544 }}
545 >
546 Dashboard
547 </NavDropdown.Item>
548
549 <NavDropdown.Divider />
550 <NavDropdown.Item
551 className="drowdown-item"
552 to="#signout"
553 onClick={signoutHandler}
554 >
555 Одјави се
556 </NavDropdown.Item>
557 </NavDropdown>
558 )}
559 {userInfo && !userInfo.isAdmin && (
560 <NavDropdown
561 title={
562 <span>
563 <AccountCircleIcon
564 className="header__login"
565 fontSize="large"
566 />
567 <p>{userInfo.name}</p>
568 </span>
569 }
570 id="basic-nav-dropdown"
571 >
572 <NavDropdown.Item
573 onClick={() => {
574 navigate("/profile");
575 }}
576 >
577 Профил
578 </NavDropdown.Item>
579
580 <NavDropdown.Item
581 onClick={() => {
582 navigate("/orderhistory");
583 }}
584 >
585 Нарачки
586 </NavDropdown.Item>
587
588 <NavDropdown.Divider />
589 <NavDropdown.Item
590 className="drowdown-item"
591 to="#signout"
592 onClick={signoutHandler}
593 >
594 Одјави се
595 </NavDropdown.Item>
596 </NavDropdown>
597 )}
598 {!userInfo && (
599 <Link
600 to={"/signin"}
601 className="link"
602 onClick={() => {
603 navigate("/orderhistory");
604 }}
605 >
606 <span>
607 <AccountCircleIcon className="header__login" fontSize="large" />
608 <p>Најави се</p>
609 </span>
610 </Link>
611 )}
612
613 <Link to="/cart" className="badgee">
614 <span>
615 <ShoppingBasketIcon className="header__cart" fontSize="large" />
616
617 {cart.cartItems.length > 0 && (
618 <Badge pill bg="danger">
619 {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
620 </Badge>
621 )}
622 </span>
623 </Link>
624 </div>
625 <div className="header__search">
626 <input className="header__searchInput" type="text" />
627 <SearchIcon className="header__searchIcon" fontSize="large" />
628 </div>
629 </div>
630 </div>
631 );
632}
633
634export default Header;
Note: See TracBrowser for help on using the repository browser.