From 328c2406275e16752a6c470fbf109000469c1394 Mon Sep 17 00:00:00 2001
From: Jack Robetson <jackrobertsonps3@gmail.com>
Date: Wed, 10 Apr 2024 17:37:21 +0100
Subject: [PATCH] Mobile opertermisation

---
 src/pages/Localities/InteractivePoints.js |  2 --
 src/pages/Widget/index.js                 | 33 ++++++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/pages/Localities/InteractivePoints.js b/src/pages/Localities/InteractivePoints.js
index 234a2ae..54a1b1e 100644
--- a/src/pages/Localities/InteractivePoints.js
+++ b/src/pages/Localities/InteractivePoints.js
@@ -1,7 +1,5 @@
 import React, {useEffect, useState, useRef, useMemo} from "react";
 import Button from "@mui/material/Button";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import Paper from "@mui/material/Paper";
 import InfoIcon from "@mui/icons-material/Info";
 import IconButton from "@mui/material/IconButton";
diff --git a/src/pages/Widget/index.js b/src/pages/Widget/index.js
index 262f15d..cdebf09 100644
--- a/src/pages/Widget/index.js
+++ b/src/pages/Widget/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { IoWater } from "react-icons/io5";
 import { FaLocationDot } from "react-icons/fa6";
 import InteractivePoints from "../Localities/InteractivePoints";
@@ -8,22 +8,35 @@ import ExpandableButton from '../Widget/BubbleCharts/ExpandableButton'; // Adjus
 const WidgetConsolidation = ({ map, isZoomCompleted, cycleSVG }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isInteractivePointsOpen, setIsInteractivePointsOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect screen size
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768); // For example, consider < 768px as mobile
+    };
+
+    // Check on mount
+    checkMobile();
+
+    // Listen for resize events
+    window.addEventListener('resize', checkMobile);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
-  // Toggle GeoControls Widget
   const toggleOpen = () => {
-    console.log("GeoControls Toggle Button clicked");
-    setIsOpen(!isOpen); // Toggle current widget
+    setIsOpen(!isOpen);
     if (isInteractivePointsOpen) {
-      setIsInteractivePointsOpen(false); // Ensure only one widget is open at a time
+      setIsInteractivePointsOpen(false);
     }
   };
 
-  // Toggle Interactive Points Widget
   const toggleInteractivePointsOpen = () => {
-    console.log("Interactive Points Toggle Button clicked");
-    setIsInteractivePointsOpen(!isInteractivePointsOpen); // Toggle current widget
+    setIsInteractivePointsOpen(!isInteractivePointsOpen);
     if (isOpen) {
-      setIsOpen(false); // Ensure only one widget is open at a time
+      setIsOpen(false);
     }
   };
 
@@ -39,7 +52,7 @@ const WidgetConsolidation = ({ map, isZoomCompleted, cycleSVG }) => {
           padding: "10px",
           zIndex: 4,
           backgroundColor: "rgba(255, 255, 255, 0.8)",
-          width: "25vw",
+          width: isMobile ? "90vw" : "25vw", // Dynamic width based on isMobile state
           borderRadius: "10px",
         }}
       >