From a9136d5df0952227bedf9adb1036fdff9ff6e98b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mie=20Treff?= <ntreff@terrestris.de>
Date: Mon, 5 Aug 2024 17:19:24 +0200
Subject: [PATCH] fix: feature-info for mobile

---
 .../ToolMenu/FeatureInfo/index.less           |  6 +++++
 src/components/ToolMenu/index.tsx             | 24 ++++++++++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/ToolMenu/FeatureInfo/index.less b/src/components/ToolMenu/FeatureInfo/index.less
index 9243b62be..61e6a1327 100644
--- a/src/components/ToolMenu/FeatureInfo/index.less
+++ b/src/components/ToolMenu/FeatureInfo/index.less
@@ -12,3 +12,9 @@
     padding: 4px 0;
   }
 }
+
+.usage-hint {
+  @media (max-width: 599px) {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ToolMenu/index.tsx b/src/components/ToolMenu/index.tsx
index ec8451b8f..a0b4a6222 100644
--- a/src/components/ToolMenu/index.tsx
+++ b/src/components/ToolMenu/index.tsx
@@ -114,6 +114,7 @@ export const ToolMenu: React.FC<ToolMenuProps> = ({
   const dispatch = useAppDispatch();
   const availableTools = useAppSelector(state => state.toolMenu.availableTools);
   const activeKeys = useAppSelector(state => state.toolMenu.activeKeys);
+  const selectedFeatures = useAppSelector(state => state.selectedFeatures);
 
   const client = useSHOGunAPIClient();
   const keycloak = client?.getKeycloak();
@@ -123,15 +124,17 @@ export const ToolMenu: React.FC<ToolMenuProps> = ({
   const [isResizing, setIsResizing] = useState(false);
   const [width, setWidth] = useState(320);
   const [noCollapseWidth, setNoCollapseWidth] = useState(width);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
 
   useEffect(() => {
     const mobileQuery = window.matchMedia('only screen and (max-width: 450px) and (orientation: portrait),' +
       'only screen and (max-width: 750px) and (orientation: landscape), only screen and (max-width: 580px)');
     const mobileNavigatorRegEx = new RegExp('/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle' +
       '|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/');
-    const isMobile = mobileQuery.matches || mobileNavigatorRegEx.test(window.navigator.userAgent);
+    const mobile = mobileQuery.matches || mobileNavigatorRegEx.test(window.navigator.userAgent);
+    setIsMobile(mobile);
 
-    if (isMobile) {
+    if (mobile) {
       setCollapsed(true);
       setWidth(collapseWidth);
     }
@@ -395,6 +398,13 @@ export const ToolMenu: React.FC<ToolMenuProps> = ({
     };
   }, [onMouseMove, onMouseUp]);
 
+  useEffect(() => {
+    if (isMobile && (Object.keys(selectedFeatures).length > 0)) {
+      setCollapsed(false);
+      setWidth(noCollapseWidth);
+    }
+  }, [selectedFeatures, noCollapseWidth, isMobile]);
+
   return (
     <div
       aria-label="tool-menu"
@@ -406,11 +416,13 @@ export const ToolMenu: React.FC<ToolMenuProps> = ({
         activeKey={activeKeys}
         destroyInactivePanel={true}
         onChange={(keys: string[] | string) => {
-          setCollapsed(false);
-          dispatch(setActiveKeys(_toArray(keys)));
-          if (collapsed) {
-            setWidth(noCollapseWidth);
+          if (keys[0] === 'feature_info' && keys.length === 1 && isMobile) {
+            setCollapsed(true);
+          } else {
+            setCollapsed(false);
           }
+          dispatch(setActiveKeys(_toArray(keys)));
+          setWidth(collapsed ? collapseWidth : noCollapseWidth);
         }}
         {...restProps}
       >