From 4729aaf998c134f8fa335d97484c3e388af8951f Mon Sep 17 00:00:00 2001
From: izawartka <59137928+izawartka@users.noreply.github.com>
Date: Wed, 25 Jun 2025 15:24:57 +0200
Subject: [PATCH] Added LayerOptionsMenu component

+Added LayerOptionsMenu component in the side menu which holds all layer-specific options together
---
 src/components/sidemenu/LayerOptionsMenu.js | 12 ++++++++++++
 src/components/sidemenu/SideMenu.css        |  6 ++++++
 src/components/sidemenu/SideMenu.js         |  6 ++----
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/components/sidemenu/LayerOptionsMenu.js

diff --git a/src/components/sidemenu/LayerOptionsMenu.js b/src/components/sidemenu/LayerOptionsMenu.js
new file mode 100644
index 0000000..7e0b414
--- /dev/null
+++ b/src/components/sidemenu/LayerOptionsMenu.js
@@ -0,0 +1,12 @@
+import ShowTrackHoverInfoCheckbox from "./ShowTrackHoverInfoCheckbox";
+import TrackColorMode from "./track-color-mode/TrackColorMode";
+
+export default function LayerOptionsMenu() {
+    return (
+        <div className="layer-options-menu">
+            <h3>Layer options</h3>
+            <ShowTrackHoverInfoCheckbox />
+            <TrackColorMode />
+        </div>
+    );
+}
diff --git a/src/components/sidemenu/SideMenu.css b/src/components/sidemenu/SideMenu.css
index 0bae77c..2522d4c 100644
--- a/src/components/sidemenu/SideMenu.css
+++ b/src/components/sidemenu/SideMenu.css
@@ -18,6 +18,12 @@
     gap: 1em;
 }
 
+.layer-options-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
 .side-menu .hidden {
     visibility: hidden;
 }
diff --git a/src/components/sidemenu/SideMenu.js b/src/components/sidemenu/SideMenu.js
index cbc2f7c..b840676 100644
--- a/src/components/sidemenu/SideMenu.js
+++ b/src/components/sidemenu/SideMenu.js
@@ -2,11 +2,10 @@ 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';
 import InfoFooter from './InfoFooter';
+import LayerOptionsMenu from './LayerOptionsMenu';
 
 export default function SideMenu() {
     const { sideMenuOpen } = useContext(MainContext);
@@ -19,8 +18,7 @@ export default function SideMenu() {
                 <SceneryInfoButton />
                 <DistanceMeterButton />
                 <LayersMenu />
-                <ShowTrackHoverInfoCheckbox />
-                <TrackColorMode />
+                <LayerOptionsMenu />
                 <InfoFooter />
             </div>
         </div>