[frontend]: Add navbar and statistics page

frontend/src/components/LuasPopup.jsx

@@ -41,7 +41,7 @@ const LuasPopup = ({ item, objectTitle, luasLine }) => {
                 <li><b>Cycle & ride?:</b> {(item.luasStopIsCycleAndRide === "1") ? "Yes" : "No"}</li>
                 <li><b>Operational?:</b> {(item.luasStopIsEnabled === "1") ? "Yes" : "No"}</li>
             </ul>
-            <button onClick={fetchLuasData} style={{ padding: "5px", marginTop: "5px", cursor: "pointer" }}>
+            <button onClick={fetchLuasData} style={{ padding: "5px", marginTop: "5px", cursor: "pointer", color: "white" }}>
                 Load Luas Schedule
             </button>
             <div dangerouslySetInnerHTML={{ __html: luasInfo }} style={{ marginTop: "10px" }}></div>

frontend/src/components/Navbar.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Navbar = () => {
+    return (
+        <nav
+            style={{
+                position: "fixed",
+                top: "0",
+                right: "0",
+                left: "0",
+                height: "5vh",
+                background: "rgba(255, 255, 255, 0.9)",
+                color: "black",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "0 20px",
+                transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",
+                zIndex: 1200,
+                boxShadow: "0 2px 5px rgba(0, 0, 0, 0.1)"
+            }}
+        >
+            <div style={{display: "flex", alignItems: "center", gap: "10px"}}>
+                <img
+                    src="/ticket.png"  // Ensure this path is correct
+                    alt="Iompar"
+                    style={{width: "24px", height: "24px", borderRadius: "5px"}}
+                />
+                <div style={{fontSize: "18px", fontWeight: "bold"}}>
+                    <Link to="/" style={{textDecoration: "none", color: "black"}}>
+                        Iompar
+                    </Link>
+                </div>
+            </div>
+
+                <div style={{display: "flex", gap: "20px"}}>
+                    <Link
+                        to="/"
+                        style={{
+                            textDecoration: "none",
+                            color: "black",
+                            padding: "5px 10px",
+                            borderRadius: "5px",
+                            transition: "background 0.2s",
+                        }}
+                        onMouseEnter={(e) => (e.target.style.background = "rgba(0, 0, 0, 0.1)")}
+                        onMouseLeave={(e) => (e.target.style.background = "transparent")}
+                    >
+                        Home
+                    </Link>
+                    <Link
+                        to="/statistics"
+                        style={{
+                            textDecoration: "none",
+                            color: "black",
+                            padding: "5px 10px",
+                            borderRadius: "5px",
+                            transition: "background 0.2s",
+                        }}
+                        onMouseEnter={(e) => (e.target.style.background = "rgba(0, 0, 0, 0.1)")}
+                        onMouseLeave={(e) => (e.target.style.background = "transparent")}
+                    >
+                        Statistics
+                    </Link>
+                </div>
+        </nav>
+);
+};
+
+export default Navbar;

frontend/src/components/Sidebar.jsx

@@ -153,7 +153,7 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
 
     return (
         <div style={{
-            position: "absolute", top: window.innerWidth < 900 ? "8vh" : "1vh", right: "1vh",
+            position: "absolute", top: window.innerWidth < 900 ? "8vh" : "6vh", right: "1vh",
             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",
@@ -165,7 +165,6 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
             </button>
             {isOpen && (
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
-                    <h3>Select Data Sources</h3>
                     {menuData.map((item) => (
                         <CheckboxItem
                             key={item.id}
@@ -176,7 +175,7 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
                             setEnabledSources={setEnabledSources}
                         />
                     ))}
-                    <button onClick={handleSubmit} style={{ marginTop: "10px" }}>Submit</button>
+                    <button onClick={handleSubmit} style={{ marginTop: "10px", color: "white" }}>Submit</button>
                 </div>
             )}
         </div>

frontend/src/components/Statistics.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Statistics = () => {
+    return (
+        <div style={{height: "100vh", width: "100vw", display: "flex", position: "relative", paddingTop: "5vh"}}>
+            <h1 className="text-2xl font-bold mb-4">About This Application</h1>
+            <p>This application provides real-time and permanent data on Irish Rail, Luas, and bus services.</p>
+        </div>
+    );
+};
+
+export default Statistics;