Sidebar on hover, and click outside sidebar to close (beta)
# Menu on hover

In the desktop (non-mobile) version, the menu could expand automatically when hovering and hide when not hovering menu. https://stackoverflow.com/questions/4811807/hidden-sidebar-that-shows-up-on-hover.

Example:

https://github.com/user-attachments/assets/4a0390fa-a152-4961-9c1c-382718a384bb

Code:

```js
// with timeout because element needs to be loaded
setTimeout(function() {
    
  $(function() {
    $('#sidebar').hover(function() {
      document.querySelector(".sidebar").classList.add("expanded"); 
      document.querySelector(".content").classList.add("sidebarExpanded");
    }, function() {
      document.querySelector(".sidebar").classList.remove("expanded");
      document.querySelector(".content").classList.remove("sidebarExpanded");
    }).trigger('mouseleave');
  });

}, 500);
```

# Click outside menu
In mobile view, Clicking outside the menu should close the menu.

```js
// with timeout because element needs to be loaded
setTimeout(function() {

  // First we check if you support touch, otherwise it's click:
  let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

  const element = document.querySelector(".sidebar");

  document.addEventListener(touchEvent, (event) => {
    if (!element.contains(event.target)) {
      console.log("Clicked Outside");
      document.querySelector(".sidebar").classList.remove("expanded");
      document.querySelector(".content").classList.remove("sidebarExpanded");
    } 
  });

}, 500);
```