Toggle app context menu on windows and linux

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -20,6 +20,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { TopBarRegistration } from "./top-bar-registration";
 import { emitOpenAppMenuAsContextMenu, requestWindowAction } from "../../../ipc";
 import { WindowAction } from "../../../../common/ipc/window";
+import { useToggle } from "../../../hooks";
 
 interface Props extends React.HTMLAttributes<any> {}
 
@@ -39,10 +40,15 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 });
 
 const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies) => {
+  const [isAppContextMenuOpen, toggleIsAppContextMenuOpen] = useToggle(false);
   const elem = useRef<HTMLDivElement>();
 
-  const openContextMenu = () => {
-    emitOpenAppMenuAsContextMenu();
+  const toggleAppContextMenu = () => {
+    toggleIsAppContextMenuOpen();
+
+    if (isAppContextMenuOpen) {
+      emitOpenAppMenuAsContextMenu();
+    }
   };
 
   const goHome = () => {
@@ -85,7 +91,7 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
       <div className={styles.tools}>
         {(isWindows || isLinux) && (
           <div className={styles.winMenu}>
-            <div onClick={openContextMenu} data-testid="window-menu">
+            <div onClick={toggleAppContextMenu} data-testid="window-menu">
               <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
             </div>
           </div>
@@ -153,7 +159,6 @@ const renderRegisteredItems = (items: TopBarRegistration[]) => (
 export const TopBar = withInjectables(observer(NonInjectedTopBar), {
   getProps: (di, props) => ({
     items: di.inject(topBarItemsInjectable),
-
     ...props,
   }),
 });

src/renderer/hooks/index.ts

@@ -8,3 +8,4 @@
 export * from "./useOnUnmount";
 export * from "./useInterval";
 export * from "./useMutationObserver";
+export * from "./use-toggle";

src/renderer/hooks/use-toggle.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { useState } from "react";
+
+export function useToggle(initial: boolean): [value: boolean, toggle: () => void] {
+  const [val, setVal] = useState(initial);
+
+  return [val, () => setVal(!val)];
+}