web: don't uncollapse nav bar if a menu is still open

apps/desktop/src/api/os-integration.ts

@@ -252,6 +252,7 @@ export const osIntegrationRouter = t.router({
           if (menuItem) menu.append(menuItem);
         }
         if (menu.items.length > 0) menu.popup();
+        menu.on("menu-will-close", () => emit.next([]));
         return () => {
           menu.removeAllListeners();
           menu.closePopup();

apps/web/src/components/navigation-menu/index.tsx

@@ -91,7 +91,7 @@ import { usePersistentState } from "../../hooks/use-persistent-state";
 import { MenuItem } from "@notesnook/ui";
 import { Color, Notebook, Tag } from "@notesnook/core";
 import { handleDrop } from "../../common/drop-handler";
-import { Menu } from "../../hooks/use-menu";
+import { Menu, useMenuStore, useMenuTrigger } from "../../hooks/use-menu";
 import { RenameColorDialog } from "../../dialogs/item-dialog";
 import { strings } from "@notesnook/intl";
 import Tags from "../../views/tags";
@@ -272,11 +272,26 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
       onMouseEnter={() => {
         clearTimeout(mouseHoverTimeout.current);
       }}
-      onMouseLeave={() => {
+      onMouseLeave={function onMouseLeave() {
         clearTimeout(mouseHoverTimeout.current);
         if (!isNavPaneCollapsed) return;
         mouseHoverTimeout.current = setTimeout(() => {
           if (!isNavPaneCollapsed) return;
+
+          // special case to handle when menu is open, we don't want to collapse the nav pane until the menu is closed
+          if (Menu.isOpen()) {
+            const unsubscribe = useMenuStore.subscribe(
+              (s) => s.isOpen,
+              (isOpen) => {
+                if (!isOpen) {
+                  unsubscribe();
+                  onMouseLeave();
+                }
+              }
+            );
+            return;
+          }
+
           setExpanded(false);
         }, 500) as unknown as number;
       }}

apps/web/src/hooks/use-menu.ts

@@ -17,11 +17,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { create } from "zustand";
 import { shallow } from "zustand/shallow";
 import { MenuItem, PositionOptions } from "@notesnook/ui";
 import { desktop } from "../common/desktop-bridge";
 import { isMac } from "../utils/platform";
+import createStore from "../common/store";
 
 type MenuOptions = {
   position?: PositionOptions;
@@ -38,7 +38,7 @@ type MenuStore = {
   close: () => void;
 };
 
-const useMenuStore = create<MenuStore>((set) => ({
+const [useMenuStore] = createStore<MenuStore>((set) => ({
   isOpen: false,
   items: [],
   title: undefined,
@@ -59,24 +59,24 @@ const useMenuStore = create<MenuStore>((set) => ({
         },
         {
           onData(ids) {
-            findAndCallAction(resolvedItems, ids);
+            if (ids.length > 0) findAndCallAction(resolvedItems, ids);
+            set({ isOpen: false });
           }
         }
       );
-      set(() => ({ options }));
+      set({ options, isOpen: true });
     } else {
-      set(() => ({ isOpen: true, items, options }));
+      set({ isOpen: true, items, options });
     }
   },
   close: () =>
-    set(() => ({
+    set({
       isOpen: false,
       items: [],
-      data: undefined,
       title: undefined
-    }))
+    })
 }));
-
+export { useMenuStore };
 export function useMenuTrigger() {
   const isOpen = useMenuStore((store) => store.isOpen);
   const target = useMenuStore((store) => store.options?.position?.target);
@@ -128,7 +128,6 @@ function findAndCallAction(items: MenuItem[], ids: string[]) {
   for (const id of ids) {
     const item = _items.find((item) => item.key === id);
     if (!item || item?.type !== "button") continue;
-    console.log(item);
     if (id === actionId) {
       item?.onClick?.();
     } else {