subnav done

src/components/header/SubNav.tsx

@@ -1,7 +1,6 @@
 // Modules
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
-import { motion } from "framer-motion";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 
@@ -12,15 +11,13 @@ import { ICategoriesData } from "../../types/data.types";
 // Actions
 import { setActiveLink } from "../../actions/setActiveLink.action";
 
-// Animations
-import { linkMotion } from "../../animations/subNav.animations";
-
 // Api
 import { Api } from "../../api/Api";
 import { url } from "../../url";
 
 // Components
 import Loader from "../global/Loader";
+import SubNavLi from "./SubNavLi";
 
 const SubNav = () => {
   const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
@@ -56,44 +53,25 @@ const SubNav = () => {
     <nav className="subnav">
       <div className="container">
         <ul className="subnav-inner">
-          <motion.li
-            initial={linkMotion.rest}
-            animate={activeLink === 0 ? linkMotion.active : linkMotion.rest}
-          >
-            <motion.div>
-              <Link
-                to={"/"}
-                onClick={() => onClickLink(0)}
-                className={activeLink === 0 ? "active" : ""}
-              >
-                Главная
-              </Link>
-            </motion.div>
-          </motion.li>
           {data ? (
-            data.data.map((dataEl) => {
-              return (
-                <motion.li
-                  key={uuidv4()}
-                  initial={linkMotion.rest}
-                  animate={
-                    activeLink === dataEl.id
-                      ? linkMotion.active
-                      : linkMotion.rest
-                  }
-                >
-                  <motion.div>
-                    <Link
-                      to={`/category/${dataEl.id}`}
-                      onClick={() => onClickLink(dataEl.id)}
-                      className={activeLink === dataEl.id ? "active" : ""}
-                    >
-                      {dataEl.name}
-                    </Link>
-                  </motion.div>
-                </motion.li>
-              );
-            })
+            <>
+              <SubNavLi
+                isNotCategory
+                dataEl={{ id: 0, name: "Главная" }}
+                activeLink={activeLink}
+                onClickLink={onClickLink}
+              />
+              {data.data.map((dataEl) => {
+                return (
+                  <SubNavLi
+                    key={uuidv4()}
+                    dataEl={dataEl}
+                    activeLink={activeLink}
+                    onClickLink={onClickLink}
+                  />
+                );
+              })}
+            </>
           ) : (
             <Loader />
           )}

src/components/header/SubNavLi.tsx

@@ -0,0 +1,42 @@
+// Modules
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+
+// Animations
+import { linkMotion } from "../../animations/subNav.animations";
+
+// Types
+import { ICategoriesData } from "../../types/data.types";
+
+interface IProps {
+  activeLink: number;
+  dataEl: ICategoriesData["data"][0];
+  onClickLink: (active: number) => void;
+  isNotCategory?: boolean;
+}
+
+const SubNavLi = ({
+  activeLink,
+  dataEl,
+  onClickLink,
+  isNotCategory,
+}: IProps) => {
+  return (
+    <motion.li
+      initial={linkMotion.rest}
+      animate={activeLink === dataEl.id ? linkMotion.active : linkMotion.rest}
+    >
+      <motion.div>
+        <Link
+          to={!isNotCategory ? `/category/${dataEl.id}` : "/"}
+          onClick={() => onClickLink(dataEl.id)}
+          className={activeLink === dataEl.id ? "active" : ""}
+        >
+          {dataEl.name}
+        </Link>
+      </motion.div>
+    </motion.li>
+  );
+};
+
+export default SubNavLi;

src/styles/_nav.scss

@@ -71,6 +71,7 @@
 }
 
 .language-dropdown {
+  z-index: 2;
   position: absolute;
   top: calc(100% + 1rem);
   left: 0;
@@ -107,17 +108,52 @@
   display: flex;
   align-items: center;
   gap: 2.4rem;
-  // justify-content: space-between;
+  justify-content: space-between;
 
   li {
     color: $black;
+    width: 100%;
   }
   a {
+    text-align: center;
+    text-transform: capitalize;
     display: block;
     white-space: nowrap;
     padding: 1rem;
     font-size: 1.6rem;
     color: inherit;
     @include raleway;
+
+    -webkit-user-drag: none;
+  }
+
+  /* width */
+  &::-webkit-scrollbar {
+    height: 0.5rem;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: $gray;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $gray-dark;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: $body;
+  }
+}
+
+.subnav-slider {
+  .swiper-wrapper {
+    padding: 0;
+    gap: 2.4rem;
+  }
+  .swiper-slide {
+    max-width: fit-content !important;
   }
 }