fixes clickOutside implementations

src/lib/actions/additional-svelte-jsx.d.ts

@@ -1,6 +1,6 @@
 declare namespace svelte.JSX {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface HTMLAttributes<T> {
-    onclick_outside?: () => void
+    onclickOutside?: (any) => void
   }
 }

src/lib/actions/clickOutside.ts

@@ -1,14 +1,13 @@
 // source: https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7
 
 /** Dispatch event on click outside of node */
-export function clickOutside(node: HTMLElement): unknown {
+const clickOutside = (node: HTMLElement): unknown  => {
   const handleClick = event => {
     if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      // onClickOutside(event)
-      node.dispatchEvent(new CustomEvent('click_outside'))
+      const detail = { event } // see: https://www.programmersought.com/article/93843748120/
+      node.dispatchEvent(new CustomEvent('clickOutside', { detail }))
     }
   }
-
   document.addEventListener('click', handleClick, true)
 
   return {
@@ -17,3 +16,19 @@ export function clickOutside(node: HTMLElement): unknown {
     },
   }
 }
+
+const clickOutsideAction = (node: HTMLElement, onEventFunction: (e: CustomEvent) => void): unknown => {
+  const handleClick = event => {
+    if (!node.contains(event.target)) onEventFunction(event)
+  }
+
+  document.addEventListener('click', handleClick)
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick)
+    },
+  }
+}
+
+export { clickOutside, clickOutsideAction }

src/lib/component/landing/Nav.svelte

@@ -1,30 +1,21 @@
 <script lang="ts">
-  import Button from './components/Button.svelte';
+  import { clickOutside, clickOutsideAction } from '$lib/actions/clickOutside'
+  import Button from './components/Button.svelte'
 
-  let y: number;
-  let navFloat = false;
-  $: navFloat = y > 10;
+  let y: number
+  let navFloat = false
+  $: navFloat = y > 10
 
-  let showMenu = false;
-  const toggleMenu = () => (showMenu = !showMenu);
-  let hambugerEl;
+  let showMenu = false
+  const toggleMenu = () => (showMenu = !showMenu)
+  let hambugerEl
 
-  const clickOutside = (node, onEventFunction) => {
-    const handleClick = (event) => {
-      if (!node.contains(event.target)) onEventFunction(event);
-    };
-
-    document.addEventListener('click', handleClick);
-
-    return {
-      destroy() {
-        document.removeEventListener('click', handleClick);
-      }
-    };
-  };
-  const onClickOutside = ({ target }) => {
-    if (!hambugerEl.contains(target)) showMenu = false;
-  };
+  const onClickOutsideAction = ({ target }) => {
+    if (!hambugerEl.contains(target)) showMenu = false
+  }
+  const onClickOutside = ({ detail: { event: { target } } }) => {
+    if (!hambugerEl.contains(target)) showMenu = false
+  }
 </script>
 
 <svelte:window bind:scrollY={y} />
@@ -79,8 +70,10 @@
         </svg>
       </button>
     </div>
+    <!-- use:clickOutsideAction={onClickOutsideAction} -->
+    <!-- use:clickOutside on:clickOutside={onClickOutside} -->
     <div
-      use:clickOutside={onClickOutside}
+      use:clickOutside on:clickOutside={onClickOutside}
       class:hidden={!showMenu}
       class="hidden w-full flex-grow lg:flex lg:items-center lg:w-auto mt-2 lg:mt-0 bg-white lg:bg-transparent text-black p-4 lg:p-0 z-20"
       id="nav-content"