folder list scrollbar added

src/components/FileManager/index.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import "./index.scss";
+
 import BreadCrumb from "../BreadCrumb";
 import SearchBox from "../SearchBox";
 import TitleSubtitle from "../TitleSubtitle";
@@ -10,13 +12,12 @@ import Folderlists from "../Folderlist";
 
 import graySearchIcon from "./images/gray-search-icon.svg";
 import arrowLeft from "./images/arrow-left.svg";
-import plus from "./images/plus.svg";
 
 const FileManager = () => {
   return (
     <div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
       {/* ? right Section */}
-      <div className="flex-1 ">
+      <div className="flex-1 w-10/12">
         <div className="px-7 py-5">
           {/* ? breadCrumb */}
           <div className="mb-5">
@@ -78,13 +79,13 @@ const FileManager = () => {
                 />
               </div>
             </div>
+            {/* folderLists */}
             <Folderlists />
           </div>
         </div>
       </div>
-
       {/* left Section */}
-      <CardHolder />
+      <div className=" bg-orange-500 w-3/12">fsad </div>
     </div>
   );
 };

src/components/Folderlist/index.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import "./index.scss";
+
 // ? images
 import folder from "./images/folder-open.svg";
 import more from "./images/more.svg";
@@ -9,11 +11,42 @@ import pic3 from "./images/profile-pic3.svg";
 
 const Folderlists = ({ items }) => {
   return (
-    <section className="flex flex-row items-center justify-around mt-5">
+    <section
+      className="flex flex-row gap-4 items-center mt-5 no-scrollbar tabbar overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
       {items.map((item, index) => (
         <div
-          className="flex flex-col bg-white border-2 rounded-lg p-4"
-          style={{ borderColor: "#EEEEEE", minWidth: "330px" }}
+          className="flex flex-col border-2 rounded-lg p-4"
+          style={{
+            borderColor: "#EEEEEE",
+            minWidth: "330px",
+            backgroundColor: "#FBFBFB",
+          }}
+          onClick={(e) => {
+            if (window.isDown) return e.preventDefault();
+            ///do here
+          }}
+          aria-current="page"
           key={index}
         >
           <div className="flex flex-row justify-between items-center">
@@ -23,7 +56,7 @@ const Folderlists = ({ items }) => {
                 src={item.dropDownIcon}
                 className="rotate-90 w-5 cursor-pointer mr-3"
               />
-              {item.users.slice(0, 3).map((user, i) => (
+              {item.users.slice(0, 8).map((user, i) => (
                 <img
                   key={i}
                   src={user.picture}
@@ -141,5 +174,94 @@ Folderlists.defaultProps = {
         },
       ],
     },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+      ],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+        {
+          picture: pic2,
+          name: "سعید",
+          fname: "سعیدی",
+          product: "کتاب ریاضی کلاس دوم",
+        },
+      ],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+        {
+          picture: pic2,
+          name: "سعید",
+          fname: "سعیدی",
+          product: "کتاب ریاضی کلاس دوم",
+        },
+        {
+          picture: pic3,
+          name: "محمد",
+          fname: "محمدی",
+          product: "کتاب فیزیک کلاس سول",
+        },
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+        {
+          picture: pic2,
+          name: "سعید",
+          fname: "سعیدی",
+          product: "کتاب ریاضی کلاس دوم",
+        },
+        {
+          picture: pic3,
+          name: "محمد",
+          fname: "محمدی",
+          product: "کتاب فیزیک کلاس سول",
+        },
+      ],
+    },
   ],
 };

src/components/Folderlist/index.scss

@@ -0,0 +1,11 @@
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.tabbar {
+  cursor: pointer;
+}
+.active2,
+.active2 li a {
+  cursor: move !important;
+}

src/components/Playlist/index.js

@@ -8,7 +8,7 @@ import videoPlay from "./images/video-play.svg";
 
 const Playlist = ({ items }) => {
   return (
-    <section className="flex flex-row items-center justify-between mt-7">
+    <section className="flex flex-row flex-wrap items-center gap-4 mt-7">
       {items.map((item, index) => (
         <div
           className="flex flex-row items-center bg-white border-2 rounded-lg px-2 py-4"