Added an option to disable track hover info

*Added an option to disable track hover info in the side menu

src/components/SettingsManager.js

@@ -5,6 +5,7 @@ import Constants from "../helpers/constants";
 export default function SettingsManager(props) {
     const [ layers, setLayers ] = useState([]);
     const [ trackColorMode, setTrackColorMode ] = useState(Constants.trackColorModeDefault);
+    const [ showTrackHoverInfo, setShowTrackHoverInfo ] = useState(false);
     const [ settingsLoaded, setSettingsLoaded ] = useState(false);
 
     const loadLayersSettings = useCallback(() => {
@@ -24,6 +25,7 @@ export default function SettingsManager(props) {
     return (
         <SettingsContext.Provider value={{
             layers, setLayers,
+            showTrackHoverInfo, setShowTrackHoverInfo,
             trackColorMode, setTrackColorMode
         }}>
             { props.children }

src/components/map/track-hover-info/TrackHoverInfo.js

@@ -5,6 +5,16 @@ import SettingsContext from "../../../contexts/SettingsContext";
 import './TrackHoverInfo.css';
 
 export default function TrackHoverInfo() {
+    const { showTrackHoverInfo } = useContext(SettingsContext);
+
+    if (!showTrackHoverInfo) return null;
+    
+    return (
+        <InnerTrackHoverInfo />
+    );
+}
+
+function InnerTrackHoverInfo() {
     const [ hoveredTrack, setHoveredTrack ] = useState(null);
     const mousePos = useRef({ x: 0, y: 0 });
     const divRef = useRef(null);

src/components/sidemenu/ShowTrackHoverInfoCheckbox.js

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import SettingsContext from "../../contexts/SettingsContext";
+
+export default function ShowTrackHoverInfoCheckbox(props) {
+    const { showTrackHoverInfo, setShowTrackHoverInfo } = useContext(SettingsContext);
+
+    const handleChange = (event) => {
+        setShowTrackHoverInfo(event.target.checked);
+    };
+
+    return (
+        <div className="show-track-hover-info-checkbox">
+            <label>
+                <input
+                    type="checkbox"
+                    checked={showTrackHoverInfo}
+                    onChange={handleChange}
+                />
+                Show track info on hover
+            </label>
+        </div>
+    );
+}

src/components/sidemenu/SideMenu.css

@@ -56,3 +56,8 @@
     margin-top: auto;
     align-items: flex-end;
 }
+
+.show-track-hover-info-checkbox input {
+    margin-right: 0.5em;
+    vertical-align: middle;
+}

src/components/sidemenu/SideMenu.js

@@ -2,6 +2,7 @@ import {useContext} from 'react';
 import MainContext from '../../contexts/MainContext';
 import './SideMenu.css';
 import LayersMenu from './LayersMenu';
+import ShowTrackHoverInfoCheckbox from './ShowTrackHoverInfoCheckbox';
 import TrackColorMode from './track-color-mode/TrackColorMode';
 import SceneryInfoButton from './SceneryInfoButton';
 import DistanceMeterButton from './DistanceMeterButton';
@@ -18,6 +19,7 @@ export default function SideMenu() {
                 <SceneryInfoButton />
                 <DistanceMeterButton />
                 <LayersMenu />
+                <ShowTrackHoverInfoCheckbox />
                 <TrackColorMode />
                 <InfoFooter />
             </div>