Add files via upload

src/componants/header/header/Header.jsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom";
+import useNavToolsProps from "src/Hooks/App/useNavToolsProps";
+import NavTools from "../../Shared/MidComponents/NavTools/NavTools";
+import s from "./Header.module.scss";
+import MobileNavIcon from "./MobileNavIcon";
+import Nav from "./Nav";
+
+const Header = () => {
+  const navToolsProps = useNavToolsProps();
+
+  return (
+    <header className={s.header} dir="ltr">
+      <div className={s.container}>
+        <h1>
+          <Link to="/">Exclusive</Link>
+        </h1>
+
+        <div className={s.headerContent}>
+          <Nav />
+          <NavTools {...navToolsProps} />
+        </div>
+
+        <MobileNavIcon />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/componants/header/header/Header.module.scss

@@ -0,0 +1,139 @@
+@import "src/Styles/mixins";
+
+.header {
+  padding: 4px 14px 18px 14px;
+  margin-top: 30px;
+  border-bottom: 1px var(--medium-light-gray) solid;
+}
+
+@include medium {
+  .header {
+    padding: 10px 0 14px 10px;
+  }
+}
+
+@include small {
+  .header {
+    padding: 10px 0 14px 50px;
+  }
+}
+
+.container {
+  width: calc(var(--container-width) + 2%);
+  margin: 0 auto;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 26% 1fr;
+}
+
+@include large {
+  .container {
+    grid-template-columns: unset;
+  }
+}
+
+@include small {
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: var(--container-mobile-width);
+  }
+}
+
+.container h1 {
+  width: fit-content;
+  font-size: 1.5rem;
+}
+
+.container h1>a {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  color: var(--black);
+  position: relative;
+}
+
+.container>h1::first-letter {
+  transition: color .2s;
+}
+
+.container>h1:has(:focus)::first-letter {
+  color: var(--orange-degree2);
+}
+
+.container h1>a::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background-color: var(--orange-degree2);
+  transition: width .3s .1s;
+}
+
+.container h1:has(:focus)>a::before {
+  width: 100%;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@include medium {
+  .headerContent {
+    margin-top: 10px;
+  }
+}
+
+@include small {
+  .headerContent {
+    display: none;
+  }
+}
+
+// Arabic & Japanese styles
+@media (max-width: 1300px) {
+  :where([lang=ar], [lang=ja]) .container {
+    grid-template-columns: 17% 1fr;
+  }
+}
+
+@include large {
+  :where([lang=ar], [lang=ja]) .container {
+    grid-template-columns: unset;
+  }
+}
+
+// Japanese styles
+@include medium {
+  [lang=ja] .headerContent {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+}
+
+// French styles
+[lang=fr] .container {
+  width: var(--container-width);
+}
+
+// Hungarian styles
+[lang=hu] .container {
+  width: calc(var(--container-width) - 2%);
+  grid-template-columns: 17% 1fr;
+}
+
+@include large {
+  [lang=hu] .container {
+    grid-template-columns: unset;
+  }
+}
+
+// Russian styles
+[lang=ru] .container {
+  width: calc(var(--container-width) - 2%);
+}

src/componants/header/header/MobileNavIcon.jsx

@@ -0,0 +1,28 @@
+import { useDispatch } from "react-redux";
+import { multiUpdateGlobalState } from "src/Features/globalSlice";
+import SvgIcon from "../../Shared/MiniComponents/SvgIcon";
+import s from "./MobileNavIcon.module.scss";
+
+const MobileNavIcon = () => {
+  const dispatch = useDispatch();
+
+  return (
+    <button
+      type="button"
+      className={s.mobileNav}
+      onClick={() => openMobileNav(dispatch)}
+      aria-label="Toggle navigation menu"
+    >
+      <SvgIcon name="burgerMenu" />
+    </button>
+  );
+};
+export default MobileNavIcon;
+
+function openMobileNav(dispatch) {
+  const payload = {
+    isMobileMenuActive: true,
+    isOverlayActive: true,
+  };
+  dispatch(multiUpdateGlobalState(payload));
+}

src/componants/header/header/MobileNavIcon.module.scss

@@ -0,0 +1,31 @@
+@import "src/Styles/mixins.scss";
+
+.mobileNav {
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  display: none;
+  transition: opacity .2s;
+
+  &:hover {
+    opacity: .7;
+  }
+
+  &:focus-visible>svg {
+    fill: var(--orange-degree2);
+  }
+}
+
+@include small {
+  .mobileNav {
+    display: block;
+  }
+}
+
+.mobileNav>svg {
+  width: 27px;
+  height: 27px;
+  cursor: pointer;
+  transition: fill .2s;
+}

src/componants/header/header/Nav.jsx

@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { NavLink } from "react-router-dom";
+import s from "./Nav.module.scss";
+
+const Nav = () => {
+  const { t, i18n } = useTranslation();
+  const { loginInfo } = useSelector((state) => state.user);
+  const navDirection = i18n.dir() === "ltr" ? "ltr" : "rtl";
+
+  return (
+    <nav className={s.nav} dir={navDirection}>
+      <ul>
+        <li>
+          <NavLink to="/">{t("nav.home")}</NavLink>
+        </li>
+
+        <li>
+          <NavLink to="/contact">{t("nav.contact")}</NavLink>
+        </li>
+
+        <li>
+          <NavLink to="/about">{t("nav.about")}</NavLink>
+        </li>
+
+        <li>
+          {loginInfo.isSignIn ? (
+            <NavLink to="/profile">{t("nav.profile")}</NavLink>
+          ) : (
+            <NavLink to="/signup">{t("nav.signUp")}</NavLink>
+          )}
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Nav;

src/componants/header/header/Nav.module.scss

@@ -0,0 +1,93 @@
+@import "src/Styles/mixins";
+
+.nav {
+  user-select: none;
+}
+
+.nav ul {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.nav ul>li {
+  -webkit-tap-highlight-color: transparent;
+}
+
+@include medium {
+  .nav ul {
+    gap: 18px;
+
+    & li {
+      font-size: .9rem;
+    }
+  }
+}
+
+.nav ul li a {
+  outline: none;
+  padding: 2px 0;
+  color: var(--black);
+  position: relative;
+  outline: dashed 0 var(--regular-light-gray);
+  outline-offset: 0;
+
+  &:focus-visible {
+    transition: opacity .3s, var(--outline-transition);
+    outline: 2px dashed var(--very-dark-gray);
+    outline-offset: 3px;
+    color: var(--very-dark-gray);
+  }
+
+  &[class=active]::before {
+    opacity: .5;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
+.nav ul li a::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 1px;
+  background-color: var(--black);
+  opacity: 0;
+  transition: opacity .3s;
+}
+
+.nav ul li a:focus-visible::before {
+  background-color: transparent;
+}
+
+// Arabic styles
+@include medium {
+  [lang=ar] .nav ul {
+    gap: 14px;
+  }
+}
+
+// French styles
+@include medium {
+  [lang=fr] .nav ul {
+    gap: 12px;
+  }
+}
+
+// Hungarian styles
+@include medium {
+  [lang=hu] .nav ul {
+    gap: 12px;
+  }
+}
+
+// Russian styles
+@include medium {
+  [lang=ru] .nav ul {
+    gap: 12px;
+  }
+}