docs: Adding Example for useOnWindow

[josemartinez111]

Overview

This PR provides a practical example for the useOnWindow hook and useSignal for managing component state in the Qwik framework.

The code introduces a custom hook called useCloseDropdown, which manages the state of a dropdown component. The dropdown can be opened by clicking a button and is automatically closed when a click event happens outside of the dropdown button.

Here's how it works:

• Two signals, isOpen and dropdownToggleBtn, are created. isOpen is a boolean signal for managing the open/close state of the dropdown. dropdownToggleBtn is used to hold a reference to the dropdown button element.

• An event listener closeDropdown is defined, which is invoked whenever a click event happens on the window. If the clicked element is not the dropdown button or its descendants, we set isOpen.value to false, effectively closing the dropdown.

• The useOnWindow hook is used to attach the closeDropdown event listener to the window.

In our component, we use the setDropdownToggleBtnRef function to assign the button DOM element to the dropdownToggleBtn signal.

The utility of this example is to demonstrate how one can use the useOnWindow hook and signals to interact with the DOM directly and manage component state based on user interaction and events outside the component itself.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	05ffa06

[zanettin]

thx @josemartinez111 for creating this 🙏 just adjusted the path so it's resolvable (qwik works with directories and an index file in it instead of file namings).

[josemartinez111]

thx @josemartinez111 for creating this 🙏 just adjusted the path so it's resolvable (qwik works with directories and an index file in it instead of file namings).

Thank you @zanettin for approving my very first contribution 🙌🏾

[zanettin]

thank YOU @josemartinez111 for your time and contribution 🙏