diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index c01815d339..d7e469d696 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -67,6 +67,23 @@ export default function SideBar() {
     'sidebar--cant-edit': !canEditProject
   });
 
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (
+        projectOptionsVisible &&
+        !sidebarOptionsRef.current.contains(e.target)
+      ) {
+        dispatch(closeProjectOptions());
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [projectOptionsVisible, dispatch]);
+
   return (
     <FileDrawer>
       {ide.sidebarIsExpanded && (