[frontend]: Refactor into separate components

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const dataSources = [
+        { id: "IrishRailTrains", name: "Irish Rail Trains" },
+        { id: "IrishRailStations", name: "Irish Rail Stations" },
+    ];
+
+    return (
+        <div style={{
+            position: "absolute", top: "10px", right: "10px",
+            width: "250px", minWidth: "50px",
+            padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
+            borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",
+            height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column",
+            alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
+        }}>
+            <button onClick={() => setIsOpen(!isOpen)} style={{
+                background: "none", border: "none", color: "black",
+                fontSize: "16px", cursor: "pointer", display: "flex",
+                alignItems: "center", width: "100%", justifyContent: "center",
+                padding: "8px 10px", fontWeight: "bold"
+            }}>
+                {isOpen ? "▼ Filters" : "▶ Filters"}
+            </button>
+            {isOpen && (
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
+                    <h3>Select Data Sources</h3>
+                    {dataSources.map(({ id, name }) => (
+                        <div key={id} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                            <input
+                                type="checkbox"
+                                id={id}
+                                checked={selectedSources.includes(id)}
+                                onChange={() =>
+                                    setSelectedSources((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id])
+                                }
+                            />
+                            <label htmlFor={id}>{name}</label>
+                        </div>
+                    ))}
+                    <div style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
+                        <input
+                            type="checkbox"
+                            id="toggleClustering"
+                            checked={clusteringEnabled}
+                            onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                        />
+                        <label htmlFor="toggleClustering">Cluster overlapping icons</label>
+                    </div>
+                    <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Sidebar;