Allow toggling connection island only when connected/connecting

1 files changed, 7 insertions, 1 deletions

diff --git a/gui/src/renderer/components/main-view/ConnectionPanel.tsx b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
index 8754547e1f..5b4e576f76 100644
--- a/gui/src/renderer/components/main-view/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
@@ -68,7 +68,7 @@ const StyledConnectionStatusContainer = styled.div<{
 }));
 
 export default function ConnectionPanel() {
-  const [expanded, expandImpl, collapse, toggleExpanded] = useBoolean();
+  const [expanded, expandImpl, collapse, toggleExpandedImpl] = useBoolean();
   const tunnelState = useSelector((state) => state.connection.status);
 
   const allowExpand = tunnelState.state === 'connected' || tunnelState.state === 'connecting';
@@ -79,6 +79,12 @@ export default function ConnectionPanel() {
     }
   }, [allowExpand, expandImpl]);
 
+  const toggleExpanded = useCallback(() => {
+    if (allowExpand) {
+      toggleExpandedImpl();
+    }
+  }, [allowExpand, toggleExpandedImpl]);
+
   const hasFeatureIndicators =
     allowExpand &&
     tunnelState.featureIndicators !== undefined &&