Navigation menu in Preferences (#2304)

src/renderer/hooks/index.ts

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

src/renderer/hooks/useMutationObserver.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+const config: MutationObserverInit = {
+  subtree: true,
+  childList: true,
+  attributes: false,
+  characterData: false
+};
+
+export function useMutationObserver(
+  root: Element,
+  callback: MutationCallback,
+  options: MutationObserverInit = config
+) {
+
+  useEffect(() => {
+    if (root) {
+      const observer = new MutationObserver(callback);
+
+      observer.observe(root, options);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [callback, options]);
+}