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 | import { height } from "@mui/system";
|
---|
26 |
|
---|
27 | const toggleMenu = (event) => {
|
---|
28 | event.stopPropagation();
|
---|
29 | let menu = document.querySelector(".mobile-menu-container");
|
---|
30 | menu.classList.remove("hidden");
|
---|
31 | menu.classList.add("visible");
|
---|
32 | };
|
---|
33 |
|
---|
34 | const toggleSubMenu = (event) => {
|
---|
35 | event.stopPropagation();
|
---|
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 |
|
---|
44 | const 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 |
|
---|
52 | const closeMenu = (event) => {
|
---|
53 | let menu = document.querySelector(".mobile-menu-container");
|
---|
54 | menu.classList.remove("visible");
|
---|
55 | menu.classList.add("hidden");
|
---|
56 | };
|
---|
57 |
|
---|
58 | const 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 |
|
---|
66 | const 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 |
|
---|
73 | function Header() {
|
---|
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");
|
---|
83 | window.location.href = "/signin";
|
---|
84 | };
|
---|
85 |
|
---|
86 | return (
|
---|
87 | <div className="header">
|
---|
88 | <div className="header__iconContainer">
|
---|
89 | <MenuIcon
|
---|
90 | className="header__icon"
|
---|
91 | fontSize="large"
|
---|
92 | onClick={toggleMenu}
|
---|
93 | />
|
---|
94 | <img
|
---|
95 | className="header__icon"
|
---|
96 | src={logo2}
|
---|
97 | alt="logo"
|
---|
98 | onClick={() => {
|
---|
99 | navigate("/");
|
---|
100 | }}
|
---|
101 | ></img>
|
---|
102 | </div>
|
---|
103 | <div className="mobile-menu-container hidden">
|
---|
104 | <div className="closeBtn" onClick={closeMenu}>
|
---|
105 | x
|
---|
106 | </div>
|
---|
107 | <ul className="mobile-menu">
|
---|
108 | <Link
|
---|
109 | to="/"
|
---|
110 | style={{ textDecoration: "none", color: "black" }}
|
---|
111 | onClick={closeMenu}
|
---|
112 | >
|
---|
113 | <li>Почетна</li>
|
---|
114 | </Link>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
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>
|
---|
843 | <Link to="/products/dnevna/all">
|
---|
844 | <span>
|
---|
845 | <WeekendIcon /> Дневна
|
---|
846 | </span>
|
---|
847 | </Link>
|
---|
848 | <ul>
|
---|
849 | <li>
|
---|
850 | <Link to="/products/dnevna/agolni-garnituri">
|
---|
851 | Аголни гарнитури
|
---|
852 | </Link>
|
---|
853 | </li>
|
---|
854 | <li>
|
---|
855 | <Link to="/products/dnevna/sofi">Софи</Link>
|
---|
856 | </li>
|
---|
857 | <li>
|
---|
858 | <Link to="/products/dnevna/fotelji">Фотелји</Link>
|
---|
859 | </li>
|
---|
860 | <li>
|
---|
861 | <Link to="/products/dnevna/taburetki">Табуретки</Link>
|
---|
862 | </li>
|
---|
863 | <li>
|
---|
864 | <Link to="/products/dnevna/klub-masi">Клуб Маси</Link>
|
---|
865 | </li>
|
---|
866 | <li>
|
---|
867 | <Link to="/products/dnevna/tv-komodi">ТВ Комоди</Link>
|
---|
868 | </li>
|
---|
869 | <li>
|
---|
870 | <Link to="/products/dnevna/komodi">Комоди</Link>
|
---|
871 | </li>
|
---|
872 | </ul>
|
---|
873 | </li>
|
---|
874 | <li>
|
---|
875 | <Link to="/products/hodnik/all">
|
---|
876 | <span>
|
---|
877 | <MeetingRoomIcon />
|
---|
878 | Ходник
|
---|
879 | </span>
|
---|
880 | </Link>
|
---|
881 | <ul>
|
---|
882 | <li>
|
---|
883 | <Link to="/products/hodnik/skafovi-za-cevli">
|
---|
884 | Шкафови за чевли
|
---|
885 | </Link>
|
---|
886 | </li>
|
---|
887 | <li>
|
---|
888 | <Link to="/products/hodnik/zakacalki-i-ogledala">
|
---|
889 | Закачалки и огледала
|
---|
890 | </Link>
|
---|
891 | </li>
|
---|
892 | <li>
|
---|
893 | <Link to="/products/hodnik/kolekcii-za-hodnik">
|
---|
894 | Колекции за ходник
|
---|
895 | </Link>
|
---|
896 | </li>
|
---|
897 | </ul>
|
---|
898 | </li>
|
---|
899 | <li>
|
---|
900 | <Link to="/products/kujna/all">
|
---|
901 | <span>
|
---|
902 | <KitchenIcon />
|
---|
903 | Кујна
|
---|
904 | </span>
|
---|
905 | </Link>
|
---|
906 | <ul>
|
---|
907 | <li>
|
---|
908 | <Link to="/products/kujna/kujnski-agolni-garnituri">
|
---|
909 | Кујнски аголни гарнитури
|
---|
910 | </Link>
|
---|
911 | </li>
|
---|
912 | <li>
|
---|
913 | <Link to="/products/kujna/standarni-kujni">
|
---|
914 | Стандардни кујни
|
---|
915 | </Link>
|
---|
916 | </li>
|
---|
917 | </ul>
|
---|
918 | </li>
|
---|
919 | </ul>
|
---|
920 | </div>
|
---|
921 | <div className="header__dropdownColumn">
|
---|
922 | <ul>
|
---|
923 | <li>
|
---|
924 | <Link to="/products/spalna/all">
|
---|
925 | <span>
|
---|
926 | <BedIcon />
|
---|
927 | Спална
|
---|
928 | </span>
|
---|
929 | </Link>
|
---|
930 | <ul>
|
---|
931 | <li>
|
---|
932 | <Link to="/products/spalna/spalni-kompleti">
|
---|
933 | Спални комплети
|
---|
934 | </Link>
|
---|
935 | </li>
|
---|
936 |
|
---|
937 | <li>
|
---|
938 | <Link to="/products/spalna/lezai">Лежаи</Link>
|
---|
939 | </li>
|
---|
940 |
|
---|
941 | <li>
|
---|
942 | <Link to="/products/spalna/kreveti">Кревети</Link>
|
---|
943 | </li>
|
---|
944 |
|
---|
945 | <li>
|
---|
946 | <Link to="/products/spalna/plakari">Плакари</Link>
|
---|
947 | </li>
|
---|
948 | <li>
|
---|
949 | <Link to="/products/spalna/nokni-skafcinja">
|
---|
950 | Ноќни шкафчиња
|
---|
951 | </Link>
|
---|
952 | </li>
|
---|
953 | <li>
|
---|
954 | <Link to="/products/spalna/toaletni-masi">
|
---|
955 | Тоалетни маси
|
---|
956 | </Link>
|
---|
957 | </li>
|
---|
958 | </ul>
|
---|
959 | </li>
|
---|
960 | <li>
|
---|
961 | <Link to="/products/gradina/all">
|
---|
962 | <span>
|
---|
963 | <DeckIcon />
|
---|
964 | Мебел за градина
|
---|
965 | </span>
|
---|
966 | </Link>
|
---|
967 | <ul>
|
---|
968 | <li>
|
---|
969 | <Link to="/products/gradina/gradinarski-kompleti">
|
---|
970 | Градинарски комплети
|
---|
971 | </Link>
|
---|
972 | </li>
|
---|
973 | <li>
|
---|
974 | <Link to="/products/gradina/gradinarski-lulki">
|
---|
975 | Градинарски лулки
|
---|
976 | </Link>
|
---|
977 | </li>
|
---|
978 | <li>
|
---|
979 | <Link to="/products/gradina/gradinarski-cadori">
|
---|
980 | Градинарски чадори
|
---|
981 | </Link>
|
---|
982 | </li>
|
---|
983 | <li>
|
---|
984 | <Link to="/products/gradina/gradinarski-masi">
|
---|
985 | Градинарски маси
|
---|
986 | </Link>
|
---|
987 | </li>
|
---|
988 | <li>
|
---|
989 | <Link to="/products/gradina/gradinarski-stolovi">
|
---|
990 | Градинарски столови
|
---|
991 | </Link>
|
---|
992 | </li>
|
---|
993 | <li>
|
---|
994 | <Link to="/products/gradina/gradinarsko-osvetluvanje">
|
---|
995 | Градинарско осветлување
|
---|
996 | </Link>
|
---|
997 | </li>
|
---|
998 | </ul>
|
---|
999 | </li>
|
---|
1000 | </ul>
|
---|
1001 | </div>
|
---|
1002 | <div className="header__dropdownColumn">
|
---|
1003 | <ul>
|
---|
1004 | <li>
|
---|
1005 | <Link to="/products/kancelarija/all">
|
---|
1006 | <span>
|
---|
1007 | <ChairAltIcon />
|
---|
1008 | Канцеларија
|
---|
1009 | </span>
|
---|
1010 | </Link>
|
---|
1011 | <ul>
|
---|
1012 | <li>
|
---|
1013 | <Link to="/products/kancelarija/biroa">Бироа</Link>
|
---|
1014 | </li>
|
---|
1015 | <li>
|
---|
1016 | <Link to="/products/kancelarija/kancelariski-stolovi">
|
---|
1017 | Канцелариски столови
|
---|
1018 | </Link>
|
---|
1019 | </li>
|
---|
1020 | <li>
|
---|
1021 | <Link to="/products/kancelarija/gejmerski-stolovi">
|
---|
1022 | Гејмерски столови
|
---|
1023 | </Link>
|
---|
1024 | </li>
|
---|
1025 | <li>
|
---|
1026 | <Link to="/products/kancelarija/kancelariski-skafovi">
|
---|
1027 | Канцелариски шкафови
|
---|
1028 | </Link>
|
---|
1029 | </li>
|
---|
1030 | </ul>
|
---|
1031 | </li>
|
---|
1032 | <li>
|
---|
1033 | <Link to="/products/trpezarija/all">
|
---|
1034 | <span>
|
---|
1035 | <TableRestaurantIcon />
|
---|
1036 | Трпезарија
|
---|
1037 | </span>
|
---|
1038 | </Link>
|
---|
1039 | <ul>
|
---|
1040 | <li>
|
---|
1041 | <Link to="/products/trpezarija/trpezariski-masi">
|
---|
1042 | Трпезариски маси
|
---|
1043 | </Link>
|
---|
1044 | </li>
|
---|
1045 | <li>
|
---|
1046 | <Link to="/products/trpezarija/trpezariski-stolovi">
|
---|
1047 | Трпезариски столови
|
---|
1048 | </Link>
|
---|
1049 | </li>
|
---|
1050 | <li>
|
---|
1051 | <Link to="/products/trpezarija/kujnski-garnituri">
|
---|
1052 | Кујнски гарнитури
|
---|
1053 | </Link>
|
---|
1054 | </li>
|
---|
1055 | <li>
|
---|
1056 | <Link to="/products/trpezarija/bar-stolovi-i-masi">
|
---|
1057 | Бар столови и маси
|
---|
1058 | </Link>
|
---|
1059 | </li>
|
---|
1060 | </ul>
|
---|
1061 | </li>
|
---|
1062 | <li>
|
---|
1063 | <Link to="/products/detska/all">
|
---|
1064 | <span>
|
---|
1065 | <BedroomChildIcon />
|
---|
1066 | Детска соба
|
---|
1067 | </span>
|
---|
1068 | </Link>
|
---|
1069 | <ul>
|
---|
1070 | <li>
|
---|
1071 | <Link to="/products/detska/kolekcii-za-detska-soba">
|
---|
1072 | Колекции за детска соба
|
---|
1073 | </Link>
|
---|
1074 | </li>
|
---|
1075 | <li>
|
---|
1076 | <Link to="/products/detska/detski-biroa">
|
---|
1077 | Детски бироа
|
---|
1078 | </Link>
|
---|
1079 | </li>
|
---|
1080 | <li>
|
---|
1081 | <Link to="/products/detska/detski-lezai">Лежаи</Link>
|
---|
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">
|
---|
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 && (
|
---|
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 />
|
---|
1166 | <NavDropdown.Item
|
---|
1167 | className="drowdown-item"
|
---|
1168 | to="#signout"
|
---|
1169 | onClick={signoutHandler}
|
---|
1170 | >
|
---|
1171 | Одјави се
|
---|
1172 | </NavDropdown.Item>
|
---|
1173 | </NavDropdown>
|
---|
1174 | )}
|
---|
1175 | {!userInfo && (
|
---|
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 |
|
---|
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 |
|
---|
1211 | export default Header;
|
---|