source: frontend/src/components/Header.js@ b612ab1

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

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