Sexify the scrollbar

package.json

@@ -63,6 +63,7 @@
     "react-lazy-load-image-component": "^1.6.0",
     "react-lazy-with-preload": "^2.2.1",
     "react-router-dom": "^6.22.3",
+    "react-slick": "^0.30.2",
     "react-sticky-el": "^2.1.0",
     "react-turnstile": "^1.1.3",
     "react-use": "^17.5.0",

pnpm-lock.yaml

@@ -123,6 +123,9 @@ dependencies:
   react-router-dom:
     specifier: ^6.22.3
     version: 6.22.3(react-dom@18.2.0)(react@18.2.0)
+  react-slick:
+    specifier: ^0.30.2
+    version: 0.30.2(react-dom@18.2.0)(react@18.2.0)
   react-sticky-el:
     specifier: ^2.1.0
     version: 2.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -3383,6 +3386,10 @@ packages:
       tapable: 2.2.1
     dev: true
 
+  /enquire.js@2.1.6:
+    resolution: {integrity: sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==}
+    dev: false
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -4775,6 +4782,12 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /json2mq@0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+    dependencies:
+      string-convert: 0.2.1
+    dev: false
+
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -5728,6 +5741,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-slick@0.30.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      classnames: 2.5.1
+      enquire.js: 2.1.6
+      json2mq: 0.2.0
+      lodash.debounce: 4.0.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
   /react-sticky-el@2.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-oo+a2GedF4QMfCfm20e9gD+RuuQp/ngvwGMUXAXpST+h4WnmKhuv7x6MQ4X/e3AHiLYgE0zDyJo1Pzo8m51KpA==}
     peerDependencies:
@@ -6203,6 +6231,10 @@ packages:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
     dev: true
 
+  /string-convert@0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+    dev: false
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}

src/pages/Discover.tsx

@@ -207,6 +207,41 @@ export function Discover() {
     }
   }, [movieWidth]); // Added movieWidth to the dependency array
 
+  function handleWheel(e: React.WheelEvent, categorySlug: string) {
+    const carousel = carouselRefs.current[categorySlug];
+    if (carousel) {
+      const movieElements = carousel.getElementsByTagName("a");
+      if (movieElements.length > 0) {
+        const posterWidth = movieElements[0].offsetWidth;
+        const visibleMovies = Math.floor(carousel.offsetWidth / posterWidth);
+        const scrollAmount = posterWidth * visibleMovies * 0.625;
+        if (e.deltaY < 5) {
+          carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+        } else {
+          carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
+        }
+      }
+    }
+  }
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    document.body.style.overflow = "hidden";
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    document.body.style.overflow = "auto";
+    setIsHovered(false);
+  };
+
+  useEffect(() => {
+    return () => {
+      document.documentElement.style.scrollbarWidth = "none"; // Hide page scroll bar
+    };
+  }, []);
+
   function renderMovies(medias: Media[], category: string, isTVShow = false) {
     const categorySlug = category.toLowerCase().replace(/ /g, "-"); // Convert the category to a slug
     const displayCategory =
@@ -215,20 +250,28 @@ export function Discover() {
         : category.includes("Movie")
           ? `${category}s`
           : isTVShow
-            ? `${category} Show`
+            ? `${category} Shows`
             : `${category} Movies`;
     return (
-      <div className="relative overflow-hidden mt-4 rounded-xl">
+      <div
+        className="relative overflow-hidden mt-4 rounded-xl"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onWheel={(e) => handleWheel(e, categorySlug)}
+      >
         <h2 className="text-2xl font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-2">
           {displayCategory}
         </h2>
         <div
           id={`carousel-${categorySlug}`}
-          className="flex whitespace-nowrap overflow-auto scroll-snap-x-mandatory mb-4 mt-4"
+          className="flex whitespace-nowrap overflow-auto scrollbar pb-6 mb-4 mt-4"
+          style={{
+            scrollbarWidth: "thin",
+            scrollbarColor: "#fff transparent",
+          }}
           ref={(el) => {
             carouselRefs.current[categorySlug] = el;
           }}
-          style={{ overflowX: "hidden" }}
         >
           {medias.slice(0, 20).map((media) => (
             <a