From f5d86d9e1b0035ccc0e09ecb404a10df377bc547 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Tue, 5 Aug 2025 20:47:19 +0700
Subject: [PATCH] feat: Enhance dropdown menu functionality in MainLayout by
 adding click outside detection and improved toggle behavior

---
 frontend/src/App.jsx | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1e96a8c..55ef925 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -66,11 +66,40 @@ function MainLayout() {
     settings: false
   });
 
+  // Закрытие всех выпадающих меню при клике вне их области
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!event.target.closest('.nav-item.dropdown')) {
+        setDropdownStates({
+          data: false,
+          management: false,
+          tools: false,
+          settings: false
+        });
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
   const toggleDropdown = (dropdown) => {
-    setDropdownStates(prev => ({
-      ...prev,
-      [dropdown]: !prev[dropdown]
-    }));
+    setDropdownStates(prev => {
+      // Закрываем все выпадающие меню
+      const newState = {
+        data: false,
+        management: false,
+        tools: false,
+        settings: false
+      };
+      // Открываем только выбранное меню, если оно было закрыто
+      if (!prev[dropdown]) {
+        newState[dropdown] = true;
+      }
+      return newState;
+    });
   };
 
   const navCategories = [
@@ -176,6 +205,7 @@ function MainLayout() {
                           href="#"
                           onClick={(e) => {
                             e.preventDefault();
+                            e.stopPropagation();
                             toggleDropdown(category.id);
                           }}
                         >
@@ -183,7 +213,7 @@ function MainLayout() {
                           <span className="nav-link-title">{category.title}</span>
                         </a>
                         {dropdownStates[category.id] && (
-                          <div className="dropdown-menu show">
+                          <div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
                             <div className="dropdown-menu-columns">
                               <div className="dropdown-menu-column">
                                 {category.items.map(item => (