Index: frontend/src/components/Header.js
===================================================================
--- frontend/src/components/Header.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/Header.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,519 @@
+import React from "react";
+import logo from "../Images/logo.png";
+import "../styles/Header.css";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+//import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import WeekendIcon from "@mui/icons-material/Weekend";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
+import TableRestaurantIcon from "@mui/icons-material/TableRestaurant";
+import BedIcon from "@mui/icons-material/Bed";
+import KitchenIcon from "@mui/icons-material/Kitchen";
+import ChairAltIcon from "@mui/icons-material/ChairAlt";
+import BedroomChildIcon from "@mui/icons-material/BedroomChild";
+import DeckIcon from "@mui/icons-material/Deck";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import MenuIcon from "@mui/icons-material/Menu";
+import { Link } from "react-router-dom";
+import logo2 from "../Images/logo2.png";
+import Badge from "react-bootstrap/Badge";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Store } from "../Store";
+import { useContext } from "react";
+
+const toggleMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const toggleSubMenu = (event) => {
+  let menu = document.querySelector(".subDropdown");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+  let tog = document.querySelector(".subMenu");
+  tog.removeAttribute("onClick");
+  console.log("SubMenu Visible");
+};
+
+const categoryMenuTrigger = (event) => {
+  event.stopPropagation();
+  let span = event.target;
+  let menu = document.querySelector(`.${span.classList[0]}-menu`);
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const closeMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+const backToMenu = (event) => {
+  event.stopPropagation();
+  let menu1 = document.querySelector(".subDropdown");
+  menu1.classList.remove("visible");
+  menu1.classList.add("hidden");
+  console.log("SubMenu Invisible");
+};
+
+const backToSubMenu = (event) => {
+  event.stopPropagation();
+  let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+function Header() {
+  const { state } = useContext(Store);
+  const { cart } = state;
+  return (
+    <div className="header">
+      <div className="header__iconContainer">
+        <MenuIcon
+          className="header__icon"
+          fontSize="large"
+          onClick={toggleMenu}
+        />
+        <img className="header__icon" src={logo2} alt="logo"></img>
+      </div>
+      <div className="mobile-menu-container hidden">
+        <div className="closeBtn" onClick={closeMenu}>
+          x
+        </div>
+        <ul className="mobile-menu">
+          <li>Почетна</li>
+          <li onClick={toggleSubMenu} className="subMenu">
+            Производи <ArrowDropDownIcon />
+            <div className="subDropdown hidden">
+              <div className="backBtn" onClick={backToMenu}>
+                <ArrowBackIcon />
+                Назад
+              </div>
+              <ul className="mobile-submenu">
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="dnevna">
+                    <WeekendIcon /> Дневна
+                  </span>
+                  <div className="category-menu dnevna-menu hidden">
+                    <div onClick={backToSubMenu} className="dnevna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Аголни гарнитури</li>
+                      <li>Софи</li>
+                      <li>Фотелји</li>
+                      <li>Табуретки</li>
+                      <li>Клуб Маси</li>
+                      <li>ТВ комоди</li>
+                      <li>Комоди</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="hodnik">
+                    <MeetingRoomIcon />
+                    Ходник
+                  </span>
+                  <div className="category-menu hodnik-menu hidden">
+                    <div onClick={backToSubMenu} className="hodnik">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Шкафови за чевли</li>
+                      <li>Закачалки и огледала</li>
+                      <li>Колекции за ходник</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kujna">
+                    <KitchenIcon />
+                    Кујна
+                  </span>
+                  <div className="category-menu kujna-menu hidden">
+                    <div onClick={backToSubMenu} className="kujna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Кујнски аголни гарнитури</li>
+                      <li>Стандардни кујни</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="spalna">
+                    <BedIcon />
+                    Спална
+                  </span>
+                  <div className="category-menu spalna-menu hidden">
+                    <div onClick={backToSubMenu} className="spalna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Спални комплети</li>
+                      <li>Лежаи</li>
+                      <li>Кревети</li>
+                      <li>Плакари</li>
+                      <li>Ноќни шкафчиња</li>
+                      <li>Тоалетни маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="gradina">
+                    <DeckIcon />
+                    Градина
+                  </span>
+                  <div className="category-menu gradina-menu hidden">
+                    <div onClick={backToSubMenu} className="gradina">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Градинарски комплети</li>
+                      <li>Градинарски лулки</li>
+                      <li>Градинарски чадори</li>
+                      <li>Градинарски маси</li>
+                      <li>Градинарски столови</li>
+                      <li>Градинарско осветлување</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kancelarija">
+                    <ChairAltIcon />
+                    Канцеларија
+                  </span>
+                  <div className="category-menu kancelarija-menu hidden">
+                    <div onClick={backToSubMenu} className="kancelarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Бироа</li>
+                      <li>Канцелариски столови</li>
+                      <li>Гејмерски столови</li>
+                      <li>Канцелариски шкафови</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="trpezarija">
+                    <TableRestaurantIcon />
+                    Трпезарија
+                  </span>
+                  <div className="category-menu trpezarija-menu hidden">
+                    <div onClick={backToSubMenu} className="trpezarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Трпезариски маси</li>
+                      <li>Трпезариски столови</li>
+                      <li>Кујнски гарнитури</li>
+                      <li>Бар столови и маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="detska">
+                    <BedroomChildIcon />
+                    Детска соба
+                  </span>
+                  <div className="category-menu detska-menu hidden">
+                    <div onClick={backToSubMenu} className="detska">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Колекции за детска соба</li>
+                      <li>Детски бироа</li>
+                      <li>Лежаи</li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>За Нас</li>
+          <li>Контакти</li>
+        </ul>
+      </div>
+      <nav className="header__menu">
+        <img src={logo} alt="logo"></img>
+        <li>
+          <Link to={"/"} className="link">
+            Почетна
+          </Link>
+        </li>
+        <li className="header__products">
+          <span className="header__productsSpan">
+            Производи <ArrowDropDownIcon />
+          </span>
+          <div className="header__dropdown">
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <WeekendIcon /> Дневна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Софи</a>
+                    </li>
+                    <li>
+                      <a href="#">Фотелји</a>
+                    </li>
+                    <li>
+                      <a href="#">Табуретки</a>
+                    </li>
+                    <li>
+                      <a href="#">Клуб Маси</a>
+                    </li>
+                    <li>
+                      <a href="#">ТВ Комоди</a>
+                    </li>
+                    <li>
+                      <a href="#">Комоди</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <MeetingRoomIcon />
+                      Ходник
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Шкафови за чевли</a>
+                    </li>
+                    <li>
+                      <a href="#">Закачалки и огледала</a>
+                    </li>
+                    <li>
+                      <a href="#">Колекции за ходник</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <KitchenIcon />
+                      Кујна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Кујнски аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Стандардни кујни</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedIcon />
+                      Спална
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Спални комплети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Кревети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Плакари</a>
+                    </li>
+                    <li>
+                      <a href="#">Ноќни шкафчиња</a>
+                    </li>
+                    <li>
+                      <a href="#">Тоалетни маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <DeckIcon />
+                      Мебел за градина
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Градинарски комплети</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски лулки</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски чадори</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарско осветлување</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <ChairAltIcon />
+                      Канцеларија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Гејмерски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски шкафови</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <TableRestaurantIcon />
+                      Трпезарија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Трпезариски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Трпезариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Кујнски гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Бар столови и маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedroomChildIcon />
+                      Детска соба
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Колекции за детска соба</a>
+                    </li>
+                    <li>
+                      <a href="#">Детски бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul></ul>
+            </div>
+          </div>
+        </li>
+        <li className="header__aboutUs">За Нас</li>
+        <li className="header__contacts">Контакти</li>
+      </nav>
+      <div className="header__right">
+        <div className="header__buttons">
+          <span>
+            <AccountCircleIcon className="header__login" fontSize="large" />
+            <p>Најави се</p>
+          </span>
+          <Link to="/cart" className="badgee">
+            <span>
+              <ShoppingBasketIcon className="header__cart" fontSize="large" />
+
+              {cart.cartItems.length > 0 && (
+                <Badge pill bg="danger">
+                  {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
+                </Badge>
+              )}
+            </span>
+          </Link>
+        </div>
+        <div className="header__search">
+          <input className="header__searchInput" type="text" />
+          <SearchIcon className="header__searchIcon" fontSize="large" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
