source: frontend/src/components/Header.js@ 113029b

Last change on this file since 113029b was 113029b, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 2 years ago

Prototype
  • Property mode set to 100644
File size: 44.5 KB
RevLine 
[b612ab1]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";
[16237c4]18import { Link, NavLink, useNavigate } from "react-router-dom";
[b612ab1]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";
[16237c4]24import NavDropdown from "react-bootstrap/NavDropdown";
[113029b]25import { height } from "@mui/system";
[b612ab1]26
27const toggleMenu = (event) => {
[16237c4]28 event.stopPropagation();
[b612ab1]29 let menu = document.querySelector(".mobile-menu-container");
30 menu.classList.remove("hidden");
31 menu.classList.add("visible");
32};
33
34const toggleSubMenu = (event) => {
[16237c4]35 event.stopPropagation();
[b612ab1]36 let menu = document.querySelector(".subDropdown");
37 menu.classList.remove("hidden");
38 menu.classList.add("visible");
39 let tog = document.querySelector(".subMenu");
40 tog.removeAttribute("onClick");
41 console.log("SubMenu Visible");
42};
43
44const categoryMenuTrigger = (event) => {
45 event.stopPropagation();
46 let span = event.target;
47 let menu = document.querySelector(`.${span.classList[0]}-menu`);
48 menu.classList.remove("hidden");
49 menu.classList.add("visible");
50};
51
52const closeMenu = (event) => {
53 let menu = document.querySelector(".mobile-menu-container");
54 menu.classList.remove("visible");
55 menu.classList.add("hidden");
56};
57
58const backToMenu = (event) => {
59 event.stopPropagation();
60 let menu1 = document.querySelector(".subDropdown");
61 menu1.classList.remove("visible");
62 menu1.classList.add("hidden");
63 console.log("SubMenu Invisible");
64};
65
66const backToSubMenu = (event) => {
67 event.stopPropagation();
68 let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
69 menu.classList.remove("visible");
70 menu.classList.add("hidden");
71};
72
73function Header() {
[16237c4]74 const { state, dispatch: ctxDispatch } = useContext(Store);
75 const { cart, userInfo } = state;
76 const navigate = useNavigate();
77
78 const signoutHandler = () => {
79 ctxDispatch({ type: "USER_SIGNOUT" });
80 localStorage.removeItem("userInfo");
81 localStorage.removeItem("shippingAddress");
82 localStorage.removeItem("paymentMethod");
[ee05663]83 window.location.href = "/signin";
[16237c4]84 };
85
[b612ab1]86 return (
87 <div className="header">
88 <div className="header__iconContainer">
89 <MenuIcon
90 className="header__icon"
91 fontSize="large"
92 onClick={toggleMenu}
93 />
[16237c4]94 <img
95 className="header__icon"
96 src={logo2}
97 alt="logo"
98 onClick={() => {
99 navigate("/");
100 }}
101 ></img>
[b612ab1]102 </div>
103 <div className="mobile-menu-container hidden">
104 <div className="closeBtn" onClick={closeMenu}>
105 x
106 </div>
107 <ul className="mobile-menu">
[16237c4]108 <Link
109 to="/"
110 style={{ textDecoration: "none", color: "black" }}
111 onClick={closeMenu}
112 >
113 <li>Почетна</li>
114 </Link>
[b612ab1]115 <li onClick={toggleSubMenu} className="subMenu">
116 Производи <ArrowDropDownIcon />
117 <div className="subDropdown hidden">
118 <div className="backBtn" onClick={backToMenu}>
119 <ArrowBackIcon />
120 Назад
121 </div>
122 <ul className="mobile-submenu">
123 <li
124 className="category-menu-trigger"
125 onClick={categoryMenuTrigger}
126 >
127 <span className="dnevna">
128 <WeekendIcon /> Дневна
129 </span>
130 <div className="category-menu dnevna-menu hidden">
131 <div onClick={backToSubMenu} className="dnevna">
132 <ArrowBackIcon />
133 Назад
134 </div>
135 <ul>
[113029b]136 <li>
137 <Link
138 to="/products/dnevna/agolni-garnituri"
139 style={{
140 textDecoration: "none",
141 color: "black",
142 width: "100%",
143 height: "100%",
144 display: "flex",
145 justifyContent: "center",
146 alignItems: "center",
147 }}
148 >
149 Аголни гарнитури
150 </Link>
151 </li>
152 <li>
153 <Link
154 to="/products/dnevna/sofi"
155 style={{
156 textDecoration: "none",
157 color: "black",
158 width: "100%",
159 height: "100%",
160 display: "flex",
161 justifyContent: "center",
162 alignItems: "center",
163 }}
164 >
165 Софи
166 </Link>
167 </li>
168 <li>
169 <Link
170 to="/products/dnevna/fotelji"
171 style={{
172 textDecoration: "none",
173 color: "black",
174 width: "100%",
175 height: "100%",
176 display: "flex",
177 justifyContent: "center",
178 alignItems: "center",
179 }}
180 >
181 Фотелји
182 </Link>
183 </li>
184 <li>
185 <Link
186 to="/products/dnevna/taburetki"
187 style={{
188 textDecoration: "none",
189 color: "black",
190 width: "100%",
191 height: "100%",
192 display: "flex",
193 justifyContent: "center",
194 alignItems: "center",
195 }}
196 >
197 Табуретки
198 </Link>
199 </li>
200 <li>
201 <Link
202 to="/products/dnevna/klub-masi"
203 style={{
204 textDecoration: "none",
205 color: "black",
206 width: "100%",
207 height: "100%",
208 display: "flex",
209 justifyContent: "center",
210 alignItems: "center",
211 }}
212 >
213 Клуб Маси
214 </Link>
215 </li>
216 <li>
217 <Link
218 to="/products/dnevna/tv-komodi"
219 style={{
220 textDecoration: "none",
221 color: "black",
222 width: "100%",
223 height: "100%",
224 display: "flex",
225 justifyContent: "center",
226 alignItems: "center",
227 }}
228 >
229 ТВ Комоди
230 </Link>
231 </li>
232 <li>
233 <Link
234 to="/products/dnevna/komodi"
235 style={{
236 textDecoration: "none",
237 color: "black",
238 width: "100%",
239 height: "100%",
240 display: "flex",
241 justifyContent: "center",
242 alignItems: "center",
243 }}
244 >
245 Комоди
246 </Link>
247 </li>
[b612ab1]248 </ul>
249 </div>
250 </li>
251 <li
252 className="category-menu-trigger"
253 onClick={categoryMenuTrigger}
254 >
255 <span className="hodnik">
256 <MeetingRoomIcon />
257 Ходник
258 </span>
259 <div className="category-menu hodnik-menu hidden">
260 <div onClick={backToSubMenu} className="hodnik">
261 <ArrowBackIcon />
262 Назад
263 </div>
264 <ul>
[113029b]265 <li>
266 <Link
267 to="/products/hodnik/skafovi-za-cevli"
268 style={{
269 textDecoration: "none",
270 color: "black",
271 width: "100%",
272 height: "100%",
273 display: "flex",
274 justifyContent: "center",
275 alignItems: "center",
276 }}
277 >
278 Шкафови за чевли
279 </Link>
280 </li>
281 <li>
282 <Link
283 to="/products/hodnik/zakacalki-i-ogledala"
284 style={{
285 textDecoration: "none",
286 color: "black",
287 width: "100%",
288 height: "100%",
289 display: "flex",
290 justifyContent: "center",
291 alignItems: "center",
292 }}
293 >
294 Закачалки и огледала
295 </Link>
296 </li>
297 <li>
298 <Link
299 to="/products/hodnik/kolekcii-za-hodnik"
300 style={{
301 textDecoration: "none",
302 color: "black",
303 width: "100%",
304 height: "100%",
305 display: "flex",
306 justifyContent: "center",
307 alignItems: "center",
308 }}
309 >
310 Колекции за ходник
311 </Link>
312 </li>
[b612ab1]313 </ul>
314 </div>
315 </li>
316 <li
317 className="category-menu-trigger"
318 onClick={categoryMenuTrigger}
319 >
320 <span className="kujna">
321 <KitchenIcon />
322 Кујна
323 </span>
324 <div className="category-menu kujna-menu hidden">
325 <div onClick={backToSubMenu} className="kujna">
326 <ArrowBackIcon />
327 Назад
328 </div>
329 <ul>
[113029b]330 <li>
331 <Link
332 to="/products/kujna/kujnski-agolni-garnituri"
333 style={{
334 textDecoration: "none",
335 color: "black",
336 width: "100%",
337 height: "100%",
338 display: "flex",
339 justifyContent: "center",
340 alignItems: "center",
341 }}
342 >
343 Кујнски аголни гарнитури
344 </Link>
345 </li>
346 <li>
347 <Link
348 to="/products/kujna/standarni-kujni"
349 style={{
350 textDecoration: "none",
351 color: "black",
352 width: "100%",
353 height: "100%",
354 display: "flex",
355 justifyContent: "center",
356 alignItems: "center",
357 }}
358 >
359 Стандардни кујни
360 </Link>
361 </li>
[b612ab1]362 </ul>
363 </div>
364 </li>
365 <li
366 className="category-menu-trigger"
367 onClick={categoryMenuTrigger}
368 >
369 <span className="spalna">
370 <BedIcon />
371 Спална
372 </span>
373 <div className="category-menu spalna-menu hidden">
374 <div onClick={backToSubMenu} className="spalna">
375 <ArrowBackIcon />
376 Назад
377 </div>
378 <ul>
[113029b]379 <li>
380 <Link
381 to="/products/spalna/spalni-kompleti"
382 style={{
383 textDecoration: "none",
384 color: "black",
385 width: "100%",
386 height: "100%",
387 display: "flex",
388 justifyContent: "center",
389 alignItems: "center",
390 }}
391 >
392 Спални комплети
393 </Link>
394 </li>
395
396 <li>
397 <Link
398 to="/products/spalna/lezai"
399 style={{
400 textDecoration: "none",
401 color: "black",
402 width: "100%",
403 height: "100%",
404 display: "flex",
405 justifyContent: "center",
406 alignItems: "center",
407 }}
408 >
409 Лежаи
410 </Link>
411 </li>
412
413 <li>
414 <Link
415 to="/products/spalna/kreveti"
416 style={{
417 textDecoration: "none",
418 color: "black",
419 width: "100%",
420 height: "100%",
421 display: "flex",
422 justifyContent: "center",
423 alignItems: "center",
424 }}
425 >
426 Кревети
427 </Link>
428 </li>
429
430 <li>
431 <Link
432 to="/products/spalna/plakari"
433 style={{
434 textDecoration: "none",
435 color: "black",
436 width: "100%",
437 height: "100%",
438 display: "flex",
439 justifyContent: "center",
440 alignItems: "center",
441 }}
442 >
443 Плакари
444 </Link>
445 </li>
446 <li>
447 <Link
448 to="/products/spalna/nokni-skafcinja"
449 style={{
450 textDecoration: "none",
451 color: "black",
452 width: "100%",
453 height: "100%",
454 display: "flex",
455 justifyContent: "center",
456 alignItems: "center",
457 }}
458 >
459 Ноќни шкафчиња
460 </Link>
461 </li>
462 <li>
463 <Link
464 to="/products/spalna/toaletni-masi"
465 style={{
466 textDecoration: "none",
467 color: "black",
468 width: "100%",
469 height: "100%",
470 display: "flex",
471 justifyContent: "center",
472 alignItems: "center",
473 }}
474 >
475 Тоалетни маси
476 </Link>
477 </li>
[b612ab1]478 </ul>
479 </div>
480 </li>
481 <li
482 className="category-menu-trigger"
483 onClick={categoryMenuTrigger}
484 >
485 <span className="gradina">
486 <DeckIcon />
487 Градина
488 </span>
489 <div className="category-menu gradina-menu hidden">
490 <div onClick={backToSubMenu} className="gradina">
491 <ArrowBackIcon />
492 Назад
493 </div>
494 <ul>
[113029b]495 <li>
496 <Link
497 to="/products/gradina/gradinarski-kompleti"
498 style={{
499 textDecoration: "none",
500 color: "black",
501 width: "100%",
502 height: "100%",
503 display: "flex",
504 justifyContent: "center",
505 alignItems: "center",
506 }}
507 >
508 Градинарски комплети
509 </Link>
510 </li>
511 <li>
512 <Link
513 to="/products/gradina/gradinarski-lulki"
514 style={{
515 textDecoration: "none",
516 color: "black",
517 width: "100%",
518 height: "100%",
519 display: "flex",
520 justifyContent: "center",
521 alignItems: "center",
522 }}
523 >
524 Градинарски лулки
525 </Link>
526 </li>
527 <li>
528 <Link
529 to="/products/gradina/gradinarski-cadori"
530 style={{
531 textDecoration: "none",
532 color: "black",
533 width: "100%",
534 height: "100%",
535 display: "flex",
536 justifyContent: "center",
537 alignItems: "center",
538 }}
539 >
540 Градинарски чадори
541 </Link>
542 </li>
543 <li>
544 <Link
545 to="/products/gradina/gradinarski-masi"
546 style={{
547 textDecoration: "none",
548 color: "black",
549 width: "100%",
550 height: "100%",
551 display: "flex",
552 justifyContent: "center",
553 alignItems: "center",
554 }}
555 >
556 Градинарски маси
557 </Link>
558 </li>
559 <li>
560 <Link
561 to="/products/gradina/gradinarski-stolovi"
562 style={{
563 textDecoration: "none",
564 color: "black",
565 width: "100%",
566 height: "100%",
567 display: "flex",
568 justifyContent: "center",
569 alignItems: "center",
570 }}
571 >
572 Градинарски столови
573 </Link>
574 </li>
575 <li>
576 <Link
577 to="/products/gradina/gradinarsko-osvetluvanje"
578 style={{
579 textDecoration: "none",
580 color: "black",
581 width: "100%",
582 height: "100%",
583 display: "flex",
584 justifyContent: "center",
585 alignItems: "center",
586 }}
587 >
588 Градинарско осветлување
589 </Link>
590 </li>
[b612ab1]591 </ul>
592 </div>
593 </li>
594 <li
595 className="category-menu-trigger"
596 onClick={categoryMenuTrigger}
597 >
598 <span className="kancelarija">
599 <ChairAltIcon />
600 Канцеларија
601 </span>
602 <div className="category-menu kancelarija-menu hidden">
603 <div onClick={backToSubMenu} className="kancelarija">
604 <ArrowBackIcon />
605 Назад
606 </div>
607 <ul>
[113029b]608 <li>
609 <Link
610 to="/products/kancelarija/biroa"
611 style={{
612 textDecoration: "none",
613 color: "black",
614 width: "100%",
615 height: "100%",
616 display: "flex",
617 justifyContent: "center",
618 alignItems: "center",
619 }}
620 >
621 Бироа
622 </Link>
623 </li>
624 <li>
625 <Link
626 to="/products/kancelarija/kancelariski-stolovi"
627 style={{
628 textDecoration: "none",
629 color: "black",
630 width: "100%",
631 height: "100%",
632 display: "flex",
633 justifyContent: "center",
634 alignItems: "center",
635 }}
636 >
637 Канцелариски столови
638 </Link>
639 </li>
640 <li>
641 <Link
642 to="/products/kancelarija/gejmerski-stolovi"
643 style={{
644 textDecoration: "none",
645 color: "black",
646 width: "100%",
647 height: "100%",
648 display: "flex",
649 justifyContent: "center",
650 alignItems: "center",
651 }}
652 >
653 Гејмерски столови
654 </Link>
655 </li>
656 <li>
657 <Link
658 to="/products/kancelarija/kancelariski-skafovi"
659 style={{
660 textDecoration: "none",
661 color: "black",
662 width: "100%",
663 height: "100%",
664 display: "flex",
665 justifyContent: "center",
666 alignItems: "center",
667 }}
668 >
669 Канцелариски шкафови
670 </Link>
671 </li>
[b612ab1]672 </ul>
673 </div>
674 </li>
675 <li
676 className="category-menu-trigger"
677 onClick={categoryMenuTrigger}
678 >
679 <span className="trpezarija">
680 <TableRestaurantIcon />
681 Трпезарија
682 </span>
683 <div className="category-menu trpezarija-menu hidden">
684 <div onClick={backToSubMenu} className="trpezarija">
685 <ArrowBackIcon />
686 Назад
687 </div>
688 <ul>
[113029b]689 <li>
690 <Link
691 to="/products/trpezarija/trpezariski-masi"
692 style={{
693 textDecoration: "none",
694 color: "black",
695 width: "100%",
696 height: "100%",
697 display: "flex",
698 justifyContent: "center",
699 alignItems: "center",
700 }}
701 >
702 Трпезариски маси
703 </Link>
704 </li>
705 <li>
706 <Link
707 to="/products/trpezarija/trpezariski-stolovi"
708 style={{
709 textDecoration: "none",
710 color: "black",
711 width: "100%",
712 height: "100%",
713 display: "flex",
714 justifyContent: "center",
715 alignItems: "center",
716 }}
717 >
718 Трпезариски столови
719 </Link>
720 </li>
721 <li>
722 <Link
723 to="/products/trpezarija/kujnski-garnituri"
724 style={{
725 textDecoration: "none",
726 color: "black",
727 width: "100%",
728 height: "100%",
729 display: "flex",
730 justifyContent: "center",
731 alignItems: "center",
732 }}
733 >
734 Кујнски гарнитури
735 </Link>
736 </li>
737 <li>
738 <Link
739 to="/products/trpezarija/bar-stolovi-i-masi"
740 style={{
741 textDecoration: "none",
742 color: "black",
743 width: "100%",
744 height: "100%",
745 display: "flex",
746 justifyContent: "center",
747 alignItems: "center",
748 }}
749 >
750 Бар столови и маси
751 </Link>
752 </li>
[b612ab1]753 </ul>
754 </div>
755 </li>
756 <li
757 className="category-menu-trigger"
758 onClick={categoryMenuTrigger}
759 >
760 <span className="detska">
761 <BedroomChildIcon />
762 Детска соба
763 </span>
764 <div className="category-menu detska-menu hidden">
765 <div onClick={backToSubMenu} className="detska">
766 <ArrowBackIcon />
767 Назад
768 </div>
769 <ul>
[113029b]770 <li>
771 <Link
772 to="/products/detska/kolekcii-za-detska-soba"
773 style={{
774 textDecoration: "none",
775 color: "black",
776 width: "100%",
777 height: "100%",
778 display: "flex",
779 justifyContent: "center",
780 alignItems: "center",
781 }}
782 >
783 Колекции за детска соба
784 </Link>
785 </li>
786 <li>
787 <Link
788 to="/products/detska/detski-biroa"
789 style={{
790 textDecoration: "none",
791 color: "black",
792 width: "100%",
793 height: "100%",
794 display: "flex",
795 justifyContent: "center",
796 alignItems: "center",
797 }}
798 >
799 Детски бироа
800 </Link>
801 </li>
802 <li>
803 <Link
804 to="/products/detska/detski-lezai"
805 style={{
806 textDecoration: "none",
807 color: "black",
808 width: "100%",
809 height: "100%",
810 display: "flex",
811 justifyContent: "center",
812 alignItems: "center",
813 }}
814 >
815 Лежаи
816 </Link>
817 </li>
[b612ab1]818 </ul>
819 </div>
820 </li>
821 </ul>
822 </div>
823 </li>
824 <li>За Нас</li>
825 <li>Контакти</li>
826 </ul>
827 </div>
828 <nav className="header__menu">
829 <img src={logo} alt="logo"></img>
830 <li>
831 <Link to={"/"} className="link">
832 Почетна
833 </Link>
834 </li>
835 <li className="header__products">
836 <span className="header__productsSpan">
837 Производи <ArrowDropDownIcon />
838 </span>
839 <div className="header__dropdown">
840 <div className="header__dropdownColumn">
841 <ul>
842 <li>
[113029b]843 <Link to="/products/dnevna/all">
[b612ab1]844 <span>
845 <WeekendIcon /> Дневна
846 </span>
[113029b]847 </Link>
[b612ab1]848 <ul>
849 <li>
[113029b]850 <Link to="/products/dnevna/agolni-garnituri">
851 Аголни гарнитури
852 </Link>
[b612ab1]853 </li>
854 <li>
[113029b]855 <Link to="/products/dnevna/sofi">Софи</Link>
[b612ab1]856 </li>
857 <li>
[113029b]858 <Link to="/products/dnevna/fotelji">Фотелји</Link>
[b612ab1]859 </li>
860 <li>
[113029b]861 <Link to="/products/dnevna/taburetki">Табуретки</Link>
[b612ab1]862 </li>
863 <li>
[113029b]864 <Link to="/products/dnevna/klub-masi">Клуб Маси</Link>
[b612ab1]865 </li>
866 <li>
[113029b]867 <Link to="/products/dnevna/tv-komodi">ТВ Комоди</Link>
[b612ab1]868 </li>
869 <li>
[113029b]870 <Link to="/products/dnevna/komodi">Комоди</Link>
[b612ab1]871 </li>
872 </ul>
873 </li>
874 <li>
[113029b]875 <Link to="/products/hodnik/all">
[b612ab1]876 <span>
877 <MeetingRoomIcon />
878 Ходник
879 </span>
[113029b]880 </Link>
[b612ab1]881 <ul>
882 <li>
[113029b]883 <Link to="/products/hodnik/skafovi-za-cevli">
884 Шкафови за чевли
885 </Link>
[b612ab1]886 </li>
887 <li>
[113029b]888 <Link to="/products/hodnik/zakacalki-i-ogledala">
889 Закачалки и огледала
890 </Link>
[b612ab1]891 </li>
892 <li>
[113029b]893 <Link to="/products/hodnik/kolekcii-za-hodnik">
894 Колекции за ходник
895 </Link>
[b612ab1]896 </li>
897 </ul>
898 </li>
899 <li>
[113029b]900 <Link to="/products/kujna/all">
[b612ab1]901 <span>
902 <KitchenIcon />
903 Кујна
904 </span>
[113029b]905 </Link>
[b612ab1]906 <ul>
907 <li>
[113029b]908 <Link to="/products/kujna/kujnski-agolni-garnituri">
909 Кујнски аголни гарнитури
910 </Link>
[b612ab1]911 </li>
912 <li>
[113029b]913 <Link to="/products/kujna/standarni-kujni">
914 Стандардни кујни
915 </Link>
[b612ab1]916 </li>
917 </ul>
918 </li>
919 </ul>
920 </div>
921 <div className="header__dropdownColumn">
922 <ul>
923 <li>
[113029b]924 <Link to="/products/spalna/all">
[b612ab1]925 <span>
926 <BedIcon />
927 Спална
928 </span>
[113029b]929 </Link>
[b612ab1]930 <ul>
931 <li>
[113029b]932 <Link to="/products/spalna/spalni-kompleti">
933 Спални комплети
934 </Link>
[b612ab1]935 </li>
936
937 <li>
[113029b]938 <Link to="/products/spalna/lezai">Лежаи</Link>
[b612ab1]939 </li>
940
941 <li>
[113029b]942 <Link to="/products/spalna/kreveti">Кревети</Link>
[b612ab1]943 </li>
944
945 <li>
[113029b]946 <Link to="/products/spalna/plakari">Плакари</Link>
[b612ab1]947 </li>
948 <li>
[113029b]949 <Link to="/products/spalna/nokni-skafcinja">
950 Ноќни шкафчиња
951 </Link>
[b612ab1]952 </li>
953 <li>
[113029b]954 <Link to="/products/spalna/toaletni-masi">
955 Тоалетни маси
956 </Link>
[b612ab1]957 </li>
958 </ul>
959 </li>
960 <li>
[113029b]961 <Link to="/products/gradina/all">
[b612ab1]962 <span>
963 <DeckIcon />
964 Мебел за градина
965 </span>
[113029b]966 </Link>
[b612ab1]967 <ul>
968 <li>
[113029b]969 <Link to="/products/gradina/gradinarski-kompleti">
970 Градинарски комплети
971 </Link>
[b612ab1]972 </li>
973 <li>
[113029b]974 <Link to="/products/gradina/gradinarski-lulki">
975 Градинарски лулки
976 </Link>
[b612ab1]977 </li>
978 <li>
[113029b]979 <Link to="/products/gradina/gradinarski-cadori">
980 Градинарски чадори
981 </Link>
[b612ab1]982 </li>
983 <li>
[113029b]984 <Link to="/products/gradina/gradinarski-masi">
985 Градинарски маси
986 </Link>
[b612ab1]987 </li>
988 <li>
[113029b]989 <Link to="/products/gradina/gradinarski-stolovi">
990 Градинарски столови
991 </Link>
[b612ab1]992 </li>
993 <li>
[113029b]994 <Link to="/products/gradina/gradinarsko-osvetluvanje">
995 Градинарско осветлување
996 </Link>
[b612ab1]997 </li>
998 </ul>
999 </li>
1000 </ul>
1001 </div>
1002 <div className="header__dropdownColumn">
1003 <ul>
1004 <li>
[113029b]1005 <Link to="/products/kancelarija/all">
[b612ab1]1006 <span>
1007 <ChairAltIcon />
1008 Канцеларија
1009 </span>
[113029b]1010 </Link>
[b612ab1]1011 <ul>
1012 <li>
[113029b]1013 <Link to="/products/kancelarija/biroa">Бироа</Link>
[b612ab1]1014 </li>
1015 <li>
[113029b]1016 <Link to="/products/kancelarija/kancelariski-stolovi">
1017 Канцелариски столови
1018 </Link>
[b612ab1]1019 </li>
1020 <li>
[113029b]1021 <Link to="/products/kancelarija/gejmerski-stolovi">
1022 Гејмерски столови
1023 </Link>
[b612ab1]1024 </li>
1025 <li>
[113029b]1026 <Link to="/products/kancelarija/kancelariski-skafovi">
1027 Канцелариски шкафови
1028 </Link>
[b612ab1]1029 </li>
1030 </ul>
1031 </li>
1032 <li>
[113029b]1033 <Link to="/products/trpezarija/all">
[b612ab1]1034 <span>
1035 <TableRestaurantIcon />
1036 Трпезарија
1037 </span>
[113029b]1038 </Link>
[b612ab1]1039 <ul>
1040 <li>
[113029b]1041 <Link to="/products/trpezarija/trpezariski-masi">
1042 Трпезариски маси
1043 </Link>
[b612ab1]1044 </li>
1045 <li>
[113029b]1046 <Link to="/products/trpezarija/trpezariski-stolovi">
1047 Трпезариски столови
1048 </Link>
[b612ab1]1049 </li>
1050 <li>
[113029b]1051 <Link to="/products/trpezarija/kujnski-garnituri">
1052 Кујнски гарнитури
1053 </Link>
[b612ab1]1054 </li>
1055 <li>
[113029b]1056 <Link to="/products/trpezarija/bar-stolovi-i-masi">
1057 Бар столови и маси
1058 </Link>
[b612ab1]1059 </li>
1060 </ul>
1061 </li>
1062 <li>
[113029b]1063 <Link to="/products/detska/all">
[b612ab1]1064 <span>
1065 <BedroomChildIcon />
1066 Детска соба
1067 </span>
[113029b]1068 </Link>
[b612ab1]1069 <ul>
1070 <li>
[113029b]1071 <Link to="/products/detska/kolekcii-za-detska-soba">
1072 Колекции за детска соба
1073 </Link>
[b612ab1]1074 </li>
1075 <li>
[113029b]1076 <Link to="/products/detska/detski-biroa">
1077 Детски бироа
1078 </Link>
[b612ab1]1079 </li>
1080 <li>
[113029b]1081 <Link to="/products/detska/detski-lezai">Лежаи</Link>
[b612ab1]1082 </li>
1083 </ul>
1084 </li>
1085 </ul>
1086 </div>
1087 <div className="header__dropdownColumn">
1088 <ul></ul>
1089 </div>
1090 </div>
1091 </li>
1092 <li className="header__aboutUs">За Нас</li>
1093 <li className="header__contacts">Контакти</li>
1094 </nav>
1095 <div className="header__right">
1096 <div className="header__buttons">
[55ed171]1097 {userInfo && userInfo.isAdmin && (
1098 <NavDropdown
1099 title={
1100 <span>
1101 <AccountCircleIcon
1102 className="header__login"
1103 fontSize="large"
1104 />
1105 <p>{userInfo.name}</p>
1106 </span>
1107 }
1108 id="basic-nav-dropdown"
1109 >
1110 <NavDropdown.Item
1111 onClick={() => {
1112 navigate("/profile");
1113 }}
1114 >
1115 Профил
1116 </NavDropdown.Item>
1117
1118 <NavDropdown.Item
1119 onClick={() => {
1120 navigate("/admin/dashboard");
1121 }}
1122 >
1123 Dashboard
1124 </NavDropdown.Item>
1125
1126 <NavDropdown.Divider />
1127 <NavDropdown.Item
1128 className="drowdown-item"
1129 to="#signout"
1130 onClick={signoutHandler}
1131 >
1132 Одјави се
1133 </NavDropdown.Item>
1134 </NavDropdown>
1135 )}
1136 {userInfo && !userInfo.isAdmin && (
[16237c4]1137 <NavDropdown
1138 title={
1139 <span>
1140 <AccountCircleIcon
1141 className="header__login"
1142 fontSize="large"
1143 />
1144 <p>{userInfo.name}</p>
1145 </span>
1146 }
1147 id="basic-nav-dropdown"
1148 >
1149 <NavDropdown.Item
1150 onClick={() => {
1151 navigate("/profile");
1152 }}
1153 >
1154 Профил
1155 </NavDropdown.Item>
1156
1157 <NavDropdown.Item
1158 onClick={() => {
1159 navigate("/orderhistory");
1160 }}
1161 >
1162 Нарачки
1163 </NavDropdown.Item>
1164
1165 <NavDropdown.Divider />
[ee05663]1166 <NavDropdown.Item
[16237c4]1167 className="drowdown-item"
1168 to="#signout"
1169 onClick={signoutHandler}
1170 >
1171 Одјави се
[ee05663]1172 </NavDropdown.Item>
[16237c4]1173 </NavDropdown>
[55ed171]1174 )}
1175 {!userInfo && (
[16237c4]1176 <Link
1177 to={"/signin"}
1178 className="link"
1179 onClick={() => {
1180 navigate("/orderhistory");
1181 }}
1182 >
1183 <span>
1184 <AccountCircleIcon className="header__login" fontSize="large" />
1185 <p>Најави се</p>
1186 </span>
1187 </Link>
1188 )}
1189
[b612ab1]1190 <Link to="/cart" className="badgee">
1191 <span>
1192 <ShoppingBasketIcon className="header__cart" fontSize="large" />
1193
1194 {cart.cartItems.length > 0 && (
1195 <Badge pill bg="danger">
1196 {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
1197 </Badge>
1198 )}
1199 </span>
1200 </Link>
1201 </div>
1202 <div className="header__search">
1203 <input className="header__searchInput" type="text" />
1204 <SearchIcon className="header__searchIcon" fontSize="large" />
1205 </div>
1206 </div>
1207 </div>
1208 );
1209}
1210
1211export default Header;
Note: See TracBrowser for help on using the repository browser.