Merge pull request aws-geospatial#253 from aws-geospatial/ALS-1853_re…

…sponsiveness-issues

[ALS-1853] Responsive drawer issues

src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx

@@ -17,6 +17,7 @@ import {
 
 import { Flex, Loader, Text } from "@aws-amplify/ui-react";
 import { IconClose, IconNotificationBell } from "@demo/assets/svgs";
+import { ConfirmationModal } from "@demo/atomicui/molecules";
 import appConfig from "@demo/core/constants/appConfig";
 import BottomSheetHeights from "@demo/core/constants/bottomSheetHeights";
 import { useGeofence, useMap, usePersistedData, useRoute, useTracker } from "@demo/hooks";
@@ -37,9 +38,6 @@ const Explore = lazy(() => import("../Explore").then(module => ({ default: modul
 const UnauthSimulation = lazy(() =>
 	import("../UnauthSimulation").then(module => ({ default: module.UnauthSimulation }))
 );
-const ConfirmationModal = lazy(() =>
-	import("@demo/atomicui/molecules/ConfirmationModal").then(module => ({ default: module.ConfirmationModal }))
-);
 
 const {
 	ROUTES: { DEMO }

src/atomicui/pages/DemoPage/DemoPage.tsx

@@ -137,7 +137,8 @@ const UnauthSimulationExitModal = lazy(() =>
 
 const {
 	MAP_RESOURCES: { MAX_BOUNDS },
-	LINKS: { AMAZON_LOCATION_TERMS_AND_CONDITIONS, AWS_LOCATION }
+	LINKS: { AMAZON_LOCATION_TERMS_AND_CONDITIONS, AWS_LOCATION },
+	ROUTES: { DEMO }
 } = appConfig;
 const initShow = {
 	sidebar: false,
@@ -192,7 +193,7 @@ const DemoPage: FC = () => {
 	const { resetStore: resetGeofenceStore } = useGeofence();
 	const { isEditingRoute, resetStore: resetTrackerStore } = useTracker();
 	const { showWelcomeModal, setShowWelcomeModal, setSettingsOptions } = usePersistedData();
-	const { isDesktop, isMobile, isTablet } = useDeviceMediaQuery();
+	const { isDesktop, isMobile, isTablet, isMax766 } = useDeviceMediaQuery();
 	const { setUI, ui, bottomSheetCurrentHeight = 0, setBottomSheetHeight, setBottomSheetMinHeight } = useBottomSheet();
 	const { clearCredsAndClients } = useCredsManager();
 	const {
@@ -237,6 +238,21 @@ const DemoPage: FC = () => {
 	const isLtr = langDir === "ltr";
 	const geoLocateTopValue = `${bottomSheetCurrentHeight / 13 + 0.59}rem`;
 
+	const handlePopState = () => {
+		if (isMax766 && window.location.pathname === DEMO) {
+			history.go();
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener("popstate", handlePopState);
+
+		return () => {
+			window.removeEventListener("popstate", handlePopState);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	useEffect(() => {
 		let previousWidth = document.body.clientWidth;