Add files via upload

src/componants/shared/use menu/UserMenu.jsx

@@ -0,0 +1,67 @@
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { NavLink, useNavigate } from "react-router-dom";
+import useSignOut from "src/Hooks/App/useSignOut";
+import SvgIcon from "../MiniComponents/SvgIcon";
+import s from "./UserMenu.module.scss";
+import UserMenuItemWithCount from "./UserMenuItemWithCount";
+
+const UserMenu = ({ isActive, toggler }) => {
+  const { wishList, orderProducts } = useSelector((state) => state.products);
+  const wishListLength = wishList.length;
+  const orderProductsLength = orderProducts.length;
+  const activeClass = isActive ? s.active : "";
+  const navigateTo = useNavigate();
+  const { t } = useTranslation();
+  const signOut = useSignOut();
+
+  function handleSignOut() {
+    signOut();
+    navigateTo("/", { replace: true });
+  }
+
+  return (
+    <div className={`${s.userMenu} ${activeClass}`}>
+      <NavLink to="/profile" aria-label="Profile page">
+        <SvgIcon name="user" />
+        <span>{t("userMenuItems.profile")}</span>
+      </NavLink>
+
+      <NavLink to="/order" aria-label="Order page">
+        <UserMenuItemWithCount
+          props={{
+            iconName: "cart",
+            title: t("userMenuItems.cart"),
+            countLength: orderProductsLength,
+          }}
+        />
+      </NavLink>
+
+      <NavLink to="/cancellations" aria-label="Cancellations page">
+        <SvgIcon name="cancel" />
+        <span>{t("userMenuItems.cancellations")}</span>
+      </NavLink>
+
+      <NavLink to="/reviews" aria-label="Reviews page">
+        <SvgIcon name="solidStar" />
+        <span>{t("userMenuItems.reviews")}</span>
+      </NavLink>
+
+      <NavLink to="/wishlist" aria-label="Wishlist page">
+        <UserMenuItemWithCount
+          props={{
+            iconName: "save",
+            title: t("userMenuItems.wishlist"),
+            countLength: wishListLength,
+          }}
+        />
+      </NavLink>
+
+      <a href="#" onClick={handleSignOut} onBlur={toggler} aria-label="Logout">
+        <SvgIcon name="boxArrowLeft" />
+        <span>{t("userMenuItems.logout")}</span>
+      </a>
+    </div>
+  );
+};
+export default UserMenu;

src/componants/shared/use menu/UserMenu.module.scss

@@ -0,0 +1,72 @@
+@import "src/Styles/mixins";
+
+.userMenu {
+  position: absolute;
+  left: -191px;
+  min-width: 224px;
+  border-radius: 4px;
+  z-index: 30;
+  background: rgba(0, 0, 0, .34);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
+  backdrop-filter: blur(45.4px);
+  opacity: 0;
+  pointer-events: none;
+  top: 30px;
+  transition: opacity .3s ease-in-out, top .2s;
+
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+    top: 41px;
+  }
+}
+
+.userMenu>a {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  padding: 12px;
+
+  &:hover,
+  &:focus {
+    background-color: var(--white);
+  }
+}
+
+.userMenu>a>svg {
+  fill: var(--white);
+  width: 20px;
+  height: 20px;
+}
+
+.userMenu>a:hover svg,
+.userMenu>a:focus svg {
+  fill: var(--black);
+
+  & path {
+    stroke: var(--black);
+  }
+
+  & circle {
+    stroke: var(--black);
+  }
+}
+
+.userMenu>a>span {
+  color: var(--white);
+  font-size: .85rem;
+  margin-inline-start: 8px;
+}
+
+.userMenu>a:hover span,
+.userMenu>a:focus span {
+  color: var(--black);
+}
+
+// Arabic styles
+[lang=ar] .userMenu {
+  direction: rtl;
+}

src/componants/shared/use menu/UserMenuItemWithCount.jsx

@@ -0,0 +1,18 @@
+import SvgIcon from "../MiniComponents/SvgIcon";
+import s from "./UserMenuItemWithCount.module.scss";
+
+const UserMenuItemWithCount = ({ props: { iconName, countLength, title } }) => {
+  const countNoun = countLength > 99 ? "99+" : countLength;
+
+  return (
+    <div className={s.link} aria-label={title}>
+      <div className={s.wrapper}>
+        <SvgIcon name={iconName} />
+        {countLength > 0 && <span className={s.count}>{countNoun}</span>}
+      </div>
+
+      <span className={s.title}>{title}</span>
+    </div>
+  );
+};
+export default UserMenuItemWithCount;

src/componants/shared/use menu/UserMenuItemWithCount.module.scss

@@ -0,0 +1,56 @@
+.link {
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  gap: 8px;
+}
+
+.wrapper {
+  width: inherit;
+  height: inherit;
+}
+
+.link svg {
+  width: inherit;
+  height: inherit;
+  fill: var(--white);
+}
+
+.count {
+  display: inline-block;
+  position: absolute;
+  right: 4px;
+  top: -12px;
+  background-color: var(--dark-tomato);
+  color: var(--white) !important;
+  border-radius: 50%;
+  font-size: .6rem;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  z-index: 2;
+  transform: scale(.6);
+}
+
+.link .title {
+  color: var(--white);
+  font-size: .85rem;
+  margin-inline-start: 8px;
+  text-wrap: nowrap;
+}
+
+// Arabic styles
+[lang=ar] .count {
+  right: auto;
+  left: 4px;
+}