From ca3202f9b7ba4c374dbb549f2ccc94f2d84e5bc8 Mon Sep 17 00:00:00 2001
From: "Tanner Collin (aider)" <git@tannercollin.com>
Date: Thu, 14 Aug 2025 21:42:20 +0000
Subject: [PATCH] feat: Close submenu on map interaction

---
 mapper/src/App.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/mapper/src/App.js b/mapper/src/App.js
index 33563f7..2311433 100644
--- a/mapper/src/App.js
+++ b/mapper/src/App.js
@@ -70,11 +70,13 @@ function useSensor(measurement, name, end, duration) {
 	return [data, loading];
 };
 
-function MapViewManager({ coords, mapState, setMapState, loading }) {
+function MapViewManager({ coords, mapState, setMapState, loading, setSubmenu }) {
     const map = useMap();
 
     // Effect 1: Handle map events (pan/zoom) from the user
     useMapEvents({
+        mousedown: () => setSubmenu(false),
+        zoomstart: () => setSubmenu(false),
         moveend: () => {
             const center = map.getCenter();
             const newZoom = map.getZoom();
@@ -127,7 +129,7 @@ function MapViewManager({ coords, mapState, setMapState, loading }) {
     return null;
 }
 
-function Map({end, duration, slider, mapState, setMapState}) {
+function Map({end, duration, slider, mapState, setMapState, setSubmenu}) {
 	const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
 
 	const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]);
@@ -182,7 +184,7 @@ function Map({end, duration, slider, mapState, setMapState}) {
 				coords.length ?
 					(
 						<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
-							<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} />
+							<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
 							<TileLayer
 								attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 								url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
@@ -204,8 +206,7 @@ function Map({end, duration, slider, mapState, setMapState}) {
 	);
 }
 
-function Menu({duration, setDuration, end, setEnd, slider, setSlider}) {
-	const [submenu, setSubmenu] = useState(false);
+function Menu({duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu}) {
 	const [showRange, setShowRange] = useState(false);
 
 	const chooseDuration = (x) => {
@@ -391,6 +392,7 @@ function App() {
 		center: (initialLat && initialLng) ? [parseFloat(initialLat), parseFloat(initialLng)] : null,
 		zoom: initialZoom ? parseInt(initialZoom, 10) : 13,
 	});
+	const [submenu, setSubmenu] = useState(false);
 
 	const isInitialMount = useRef(true);
 	useEffect(() => {
@@ -430,6 +432,8 @@ function App() {
 				setEnd={setEnd}
 				slider={slider}
 				setSlider={setSlider}
+				submenu={submenu}
+				setSubmenu={setSubmenu}
 			/>
 
 			<Map
@@ -438,6 +442,7 @@ function App() {
 				slider={slider}
 				mapState={mapState}
 				setMapState={setMapState}
+				setSubmenu={setSubmenu}
 			/>
 		</div>
 	);