feat: story now scrollable

package.json

@@ -21,6 +21,7 @@
     "react-lazyload": "^3.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^7.0.2",
+    "react-swipeable": "^7.0.2",
     "react-toastify": "^10.0.6",
     "redux": "^5.0.1",
     "tailwindcss": "^3.4.16"

src/AnimalStory.jsx

@@ -76,11 +76,13 @@ const AnimalStory = () => {
             </div>
 
             {stories.map((story) => (
-                <div key={story.id} className='mb-4 flex-grow p-8 w-5/6 max-w-lg p-8 bg-white border-4 flex flex-col items-center mb-4 rounded-xl shadow-lg place-self-center'>
-                    <h1 className="text-2xl font-bold mb-4">{story.animalName}</h1>
-                    {story.stories.map((value, index) => (
-                        <p key={index} className="mt-4">{value}</p>
-                    ))}
+                <div className="w-full" key={story.id}>
+                    <h1 className="text-2xl font-bold mb-4 ml-8">{story.animalName}</h1>
+                    <div className="mb-4 flex flex-row overflow-x-auto w-screen place-self-center">
+                        {story.stories.map((value, index) => (
+                            <div key={value} className='min-w-80 m-4 p-8 bg-white border-4 mb-4 rounded-xl shadow-lg place-self-center'><p key={index}>{value}</p></div>
+                        ))}
+                    </div>
                 </div>
             ))};
 

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import { BrowserRouter as Router, Route, Routes, Link, useLocation, BrowserRouter } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -11,6 +11,10 @@ const App = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const location = useLocation();
 
+    useEffect(() => {
+        setIsMenuOpen(false);
+    }, [location.pathname]);
+
     return (
             <div className="flex flex-col items-center min-h-screen bg-blue-50">
                 <ToastContainer />