scrollbar added

Author: simmmpleweb

package.json

@@ -24,6 +24,7 @@
     "react-apexcharts": "^1.3.9",
     "react-big-calendar": "0.33.2",
     "react-bootstrap-sweetalert": "5.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-datetime": "3.0.4",
     "react-dom": "17.0.2",
     "react-github-btn": "^1.2.1",

src/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,91 @@
+import React from "react";
+
+export const renderTrack = ({ style, ...props }) => {
+  const trackStyle = {
+    position: "absolute",
+    maxWidth: "100%",
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const renderTrackRTL = ({ style, ...props }) => {
+  const trackStyle = {
+    position: "absolute",
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: "unset",
+    left: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const renderThumbDark = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(222, 222, 222, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const renderThumbLight = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(48, 48, 48, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const renderView = ({ style, ...props }) => {
+  const viewStyle = {
+    marginRight: -22,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};
+export const renderViewRTL = ({ style, ...props }) => {
+  const viewStyle = {
+    marginRight: "unset",
+    marginLeft: -15,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};
+
+export const kanbanRenderTrack = ({ style, ...props }) => {
+  const trackStyle = {
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const kanbanRenderThumbDark = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(222, 222, 222, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const kanbanRenderThumbLight = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(48, 48, 48, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const kanbanRenderView = ({ style, ...props }) => {
+  const viewStyle = {
+    position: "relative",
+    marginRight: -15,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};